摘要:使用包装一下,也可以防止被浏览器拦截。注意这里的超时时间不能太短,否则也会被拦截。我们会遇到想要弹出一个窗口,可是却是在事件执行后,才去弹出来的,这时就会被浏览器拦截,我们可以通过下面的方法来避免先用打开一个窗口,然后修改地址。
最近公司开发的一个项目,平凡用到下载各种类型的文件,但是例如.txt,.jpg,.pdf格式的文件呢浏览器会在当前窗口直接打开,影响用户体验,尝试各种方案和百度总结一下几点;
原理: 当window.open为用户触发事件内部或者加载时,不会被拦截,一旦将弹出代码移动到ajax或者一段异步代码内部,马上就出现被拦截的表现了(浏览器认为这可能是一个广告,不是一个用户希望看到的页面) 常用办法页面打开方式:超链接Welcome
等效于js代码
window.location.href="https://www.baidu.com"; //在同当前窗口中打开窗口
超链接Welcome
等效于js代码
window.open("https://www.baidu.com/"); //在另外新建窗口中打开窗口
关闭新窗口:this.window.opener =null; window.close();
解决方案:使用a标签替代:
给出如下函数,将此函数绑定到click的事件回调中,就可以避免大部分浏览器对窗口弹出 的拦截:
function newWin(url, id) { var a = document.createElement(‘a‘); a.setAttribute(‘href‘, url); a.setAttribute(‘target‘, ‘_blank‘); a.setAttribute(‘id‘, id); // 防止反复添加 if(!document.getElementById(id)) { document.body.appendChild(a); } a.click(); } function openUrl(url) { var a = $("")[0]; var e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); a.dispatchEvent(e); } //调用方法newWin(url,"bbb") / openUrl(url) //原理都是通过创建一个a标签对象,通过里面自带的target执行跳转
在超链接里加入onclick事件,如:
//这样用户点击这个超链接,浏览器会认为它是打开一个新的链接,所以就不会拦 截。
使用 setTimeout 包装一下,也可以防止被浏览器拦截。
//注意这里的超时时间不能太短,否则也会被拦截。
setTimeout("window.open(url);", 500);
我们会遇到想要弹出一个窗口,可是却是在onckick事件执行后,才去弹出来的,这时就会被浏览器拦截,我们可以通过下面的方法来避免
//先用window.open打开一个窗口,然后修改地址。如:
var tempwindow=window.open("_blank");呵呵哒,你以为这样就完事了?大错特错了,以上办法也就是在已声明url下有效,如果异步ajax请求获取下载路径呢?
解决1:
click: () => { var tempwindow=window.open();//先打开临时窗体,由于是点击事件内触发,不会被拦截 this.$http.get(url+id, {emulateJSON: true} ).then(response => { let resd = response.data; if(resd.code==0){ tempwindow.location.href = resd.result//当回调的时候更改临时窗体的路径 } else{ tempwindow.close()//回调发现无需打开窗体时可以关闭之前的临时窗体 this.$Message.error(resd.message) } }, response => { tempwindow.close()//回调发现无需打开窗体时可以关闭之前的临时窗体 console.log("error:", response) //for debug }); }
解决2:
click: () => { var flag = false; $.ajax({ "url": url+id, "type": "post", "dataType": "json", "data": data, "async":false,//同步请求 success: function (data) { $("#a").attr("href","www.baidu.com");//当回调的时候更改页面上或创建的某个a标签的href flag = true;//更改标志 }, error:function(){ } }); if(flag){ $("#a")[0].click();//href属性更改后模拟点击 } }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95678.html
摘要:使用包装一下,也可以防止被浏览器拦截。注意这里的超时时间不能太短,否则也会被拦截。我们会遇到想要弹出一个窗口,可是却是在事件执行后,才去弹出来的,这时就会被浏览器拦截,我们可以通过下面的方法来避免先用打开一个窗口,然后修改地址。 最近公司开发的一个项目,平凡用到下载各种类型的文件,但是例如.txt,.jpg,.pdf格式的文件呢浏览器会在当前窗口直接打开,影响用户体验,尝试各种方案和百...
摘要:使用包装一下,也可以防止被浏览器拦截。注意这里的超时时间不能太短,否则也会被拦截。我们会遇到想要弹出一个窗口,可是却是在事件执行后,才去弹出来的,这时就会被浏览器拦截,我们可以通过下面的方法来避免先用打开一个窗口,然后修改地址。 最近公司开发的一个项目,平凡用到下载各种类型的文件,但是例如.txt,.jpg,.pdf格式的文件呢浏览器会在当前窗口直接打开,影响用户体验,尝试各种方案和百...
摘要:之前的项目,有个功能是下载文件,这里只要在浏览器输入就会下载那个文件了。 之前的项目,有个功能是下载文件,这里只要在浏览器输入 url 就会下载那个文件了。当时我只是简单得使用 window.open ,但是却会被浏览器进行拦截,要手动开启才行,然后就搜索研究其他方法,就看到各种各样的,通过 js 打开新窗口的方法了,这里就总结一下 解决下载功能 这里就先说解决下载功能的方法,通过同事...
摘要:之前的项目,有个功能是下载文件,这里只要在浏览器输入就会下载那个文件了。 之前的项目,有个功能是下载文件,这里只要在浏览器输入 url 就会下载那个文件了。当时我只是简单得使用 window.open ,但是却会被浏览器进行拦截,要手动开启才行,然后就搜索研究其他方法,就看到各种各样的,通过 js 打开新窗口的方法了,这里就总结一下 解决下载功能 这里就先说解决下载功能的方法,通过同事...
阅读 2102·2023-05-11 16:55
阅读 3503·2021-08-10 09:43
阅读 2617·2019-08-30 15:44
阅读 2439·2019-08-29 16:39
阅读 582·2019-08-29 13:46
阅读 2004·2019-08-29 13:29
阅读 920·2019-08-29 13:05
阅读 690·2019-08-26 13:51