h5集成到IOS后,文件下载功能无效问题!

本文解决了一个iOS设备上使用window.open()方法打开新窗口下载文件时遇到的问题。此问题源于Safari浏览器的安全策略,默认阻止了非用户主动触发的弹窗行为。通过调整JavaScript代码实现了在不同浏览器下的兼容性。

公司新开发的app,测试妹纸反馈苹果版文件下载功能点击没任何反应。检查安卓版后,是正常的。于是检查了一下代码如下:

//下载文件
function downLoadFile(filePid,tableName) {
    window.open("viewFile.aspx?filePid=" + filePid + "&tableName="+tableName);
}

轻松定位问题(就一行代码,嘿嘿 - -!!)

经过调查发现:

问题原因:大部分现代的浏览器(Chrome/Firefox/IE 10+/Safari)都默认开启了阻止弹出窗口的策略,原因是window.open被广告商滥用,严重影响用户的使用。这个阻止弹出窗口的操作,并不是直接封杀window.open(),而是会根据用户的行为来判断这次window.open()是否属于流氓操作。

如果是由用户触发的动作所引起的 window.open 就不会被浏览器所阻止,比如写在 onclick 这些事件 handler 里的,但如果是代码自己触发的就会被阻止。

那么,我们可以知道,在Safari中无法open新窗口,原因是Safari的安全机制将其阻挡。

并不是所有地方都无法正常使用,在一些ajax或者jquery的getjson等回调代码中只要调用window.open都失效。原因是苹果的安全策略拦截。
 

解决办法:

function download(src) {
        if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)) {
            var fileURL = window.open(src, "_blank", "height=0,width=0,toolbar=no,menubar=no,scrollbars=no,resizable=on,location=no,status=no");
            fileURL.document.execCommand("SaveAs");
            fileURL.window.close();
            fileURL.close();
        } else if (window.navigator.msSaveBlob) {
            window.open(src);
        } else {
            var $a = document.createElement('a');
            $a.setAttribute("href", src);
            $a.setAttribute("download", "");
            var evObj = document.createEvent('MouseEvents');
            evObj.initMouseEvent('click', true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            $a.dispatchEvent(evObj);
        }
    }

搞定!午饭时间到~

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值