使用window.open打开新窗口被浏览器拦截的解决方案

dkzwm 发布于2019-08-23 12:24 / 842人阅读

摘要：问题描述代码中直接使用会被浏览器窗口拦截原因浏览器为了维护用户安全和体验，在中直接使用，来打开新的链接是会被拦截的。

问题描述：

代码中直接使用window.open("//www.baidu.com", "_blank");会被浏览器窗口拦截

原因
浏览器为了维护用户安全和体验，在JS中直接使用window.open(url，"_blank")来打开新的链接是会被拦截的。
通常项目需要在ajax异步请求完成后来打开新链接，下面提供几种解决方案

解决方案

1.最常用的（在ajax异步请求成功后打开新窗口）

 //先在ajax函数之前打开新窗口后再加载url
    $("#btn").click(function () {
        // 打开页面，此处最好使用提示页面
        var newWin = window.open();
        newWin.document.body.innerHTML="正在加载中......";
        $.ajax({
            url: "www.###.com",
            success: function (url) {
                // 重定向到目标页面
                newWin.location.href = url;
            }
        })
    });

2.利用a标签跳转，能解决大多数浏览器兼容问题，但是这种方不适用于ajax异步请求回调中打开新窗口,在ajax异步请求完成后调用无效(用户点击事件触发)

  function newWin(url){ //新窗口打开
        var a = document.createElement("a");
        a.setAttribute("href", url);
        a.setAttribute("style", "display:none");
        a.setAttribute("target", "_blank");
        document.body.appendChild(a);
        a.click();
        a.parentNode.removeChild(a);
    };
     document.body.addEventListener("click", function() {
           newWin("http://www.baidu.com");
        });

海外云主机云服务器弹出窗口被拦截新窗口打开打开新窗口 ajax打开新窗口

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

转载请注明本文地址：https://www.ucloud.cn/yun/98450.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
window.open 打开新窗口被拦截的解决方案

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

Object 2019-08-30 15:53 评论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