资讯专栏INFORMATION COLUMN

window.open 打开新窗口被拦截的解决方案

JeOam / 3126人阅读

摘要:使用包装一下,也可以防止被浏览器拦截。注意这里的超时时间不能太短,否则也会被拦截。我们会遇到想要弹出一个窗口,可是却是在事件执行后,才去弹出来的,这时就会被浏览器拦截,我们可以通过下面的方法来避免先用打开一个窗口,然后修改地址。

最近公司开发的一个项目,平凡用到下载各种类型的文件,但是例如.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

相关文章

  • window.open 打开窗口拦截解决方案

    摘要:使用包装一下,也可以防止被浏览器拦截。注意这里的超时时间不能太短,否则也会被拦截。我们会遇到想要弹出一个窗口,可是却是在事件执行后,才去弹出来的,这时就会被浏览器拦截,我们可以通过下面的方法来避免先用打开一个窗口,然后修改地址。 最近公司开发的一个项目,平凡用到下载各种类型的文件,但是例如.txt,.jpg,.pdf格式的文件呢浏览器会在当前窗口直接打开,影响用户体验,尝试各种方案和百...

    Ajian 评论0 收藏0
  • window.open 打开窗口拦截解决方案

    摘要:使用包装一下,也可以防止被浏览器拦截。注意这里的超时时间不能太短,否则也会被拦截。我们会遇到想要弹出一个窗口,可是却是在事件执行后,才去弹出来的,这时就会被浏览器拦截,我们可以通过下面的方法来避免先用打开一个窗口,然后修改地址。 最近公司开发的一个项目,平凡用到下载各种类型的文件,但是例如.txt,.jpg,.pdf格式的文件呢浏览器会在当前窗口直接打开,影响用户体验,尝试各种方案和百...

    Object 评论0 收藏0
  • js 打开窗口方式

    摘要:之前的项目,有个功能是下载文件,这里只要在浏览器输入就会下载那个文件了。 之前的项目,有个功能是下载文件,这里只要在浏览器输入 url 就会下载那个文件了。当时我只是简单得使用 window.open ,但是却会被浏览器进行拦截,要手动开启才行,然后就搜索研究其他方法,就看到各种各样的,通过 js 打开新窗口的方法了,这里就总结一下 解决下载功能 这里就先说解决下载功能的方法,通过同事...

    mgckid 评论0 收藏0
  • js 打开窗口方式

    摘要:之前的项目,有个功能是下载文件,这里只要在浏览器输入就会下载那个文件了。 之前的项目,有个功能是下载文件,这里只要在浏览器输入 url 就会下载那个文件了。当时我只是简单得使用 window.open ,但是却会被浏览器进行拦截,要手动开启才行,然后就搜索研究其他方法,就看到各种各样的,通过 js 打开新窗口的方法了,这里就总结一下 解决下载功能 这里就先说解决下载功能的方法,通过同事...

    Jensen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<