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

Object 发布于2019-08-30 15:53 / 2774人阅读

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

最近公司开发的一个项目，平凡用到下载各种类型的文件，但是例如.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属性更改后模拟点击   
   }  
}

GPU云服务器云服务器弹出窗口被拦截新窗口打开打开新窗口 ajax打开新窗口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116753.html

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

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

JeOam 2019-08-22 18:16 评论0 收藏0
window.open 打开新窗口被拦截的解决方案

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

Ajian 2019-08-02 10:45 评论0 收藏0
js 打开新窗口方式

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

mgckid 2019-08-21 17:21 评论0 收藏0
js 打开新窗口方式

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

Jensen 2019-08-01 17:54 评论0 收藏0