FreeABC
记忆重叠

window.open打开新窗口被浏览器拦截的处理方法

window.open是javascript函数,该函数的作用是打开一个新窗口或这改变原来的窗口,如果你直接在js中调用window.open()函数去打开一个新窗口,浏览器会拦截你,那么如何避免呢。

注意,只有直接使用js调用 window.open(url); 打开新窗口时,才会被拦截,如果是改变原理额窗口:window.open(url,’_self’); 则不会被拦截。

那么 js调用 window.open(url); 打开新窗口,如何才能不会浏览器拦截呢?

浏览器会拦截你,是认为你将弹出广告等用户不想得到的窗体,所以如果不想让浏览器拦截你,你可以将这个函数改为用户点击时触发,这样浏览器就认为是用户想访问这个页面,而不是你直接弹出给用户。

0)最好的解决方法:

var form = document.createElement(‘form’);
form.action = ‘www.abczn.com?id=1’;
form.target = ‘_blank’;

form.method = ‘POST’;

document.body.appendChild(form);
form.submit();

这种方式,如果需要传递参数时,需要使用 POST 方法, 默认的get方法, 无法传递参数。也就是新页面的url中没有参数部分。

另外,Ajax下载文件时也是用form 表单来模拟下载。

1)所以常用的方法就是在超链接里加入onclick事件,如<a href=”javascript:void(0)” onclick=”window.open()”></a>这样用户点击这个超链接,浏览器会认为它是打开一个新的链接,所以就不会拦 截。

2)还有一种方法:

      setTimeout(‘window.open(url);’, 500);

使用 setTimeout 包装一下,也可以防止被浏览器拦截。注意这里的超时时间不能太短,否则也会被拦截。

3)可是有时候我们会遇到想要弹出一个窗口,可是却是在onckick事件执行后,才去弹出来的,这时就会被浏览器拦截,我们可以通过下面的方法来避免,就是 先用window.open打开一个窗口,然后修改地址。如

var tempwindow=window.open(‘_blank’);打开一个窗口,然后用

tempwindow.location=’http://www.abczn.com’;使这个窗口跳转到百度,这样就会呈现弹出百度窗口的效果了。

 

其他方案:

来自https://www.cnblogs.com/Dong-Ge/p/6708026.html

一、问题:

今天在处理页面ajax请求过程中,想实现请求后打开新页面,就想到通过 js window.open 来实现,但是最终都被浏览器拦截了。

二、分析:

在谷歌搜索有没有解决方法,有些说可以通过新建a标签,模拟点击来实现,但是测试发现都实现不了,照样被浏览器拦截。
最后找到了一个折中的办法,可以实现新页面打开,但是没有a标签的那种直接流量新页面的效果。

三、实现代码:2017.12.01 chrome 测试可用

$obj.click(function(){
 var newTab=window.open('about:blank');
 $.ajax({
  success:function(data){
   if(data){
    //window.open('http://www.abczn.com');
    newTab.location.href="http://www.abczn.com";
   }
  }
 })
})

 

 

新增其他

<script type="text/javascript">

<!-- 

$( 

function()

{

//方法一

window.showModalDialog("http://www.abczn.com/");

window.showModalDialog("http://www.abczn.com/");

 
//方法二

var aa=window.open();

setTimeout(function(){

aa.location="http://www.abczn.com";

}, 100);

 
var b=window.open();

setTimeout(function(){

b.location="http://www.abczn.com";

}, 200);

 
var c=window.open();

setTimeout(function(){

c.location="http://www.abczn.com";

}, 300);

 
var d=window.open();

setTimeout(function(){

d.location="http://www.abczn.com";

}, 400);

 
var ee=window.open();

setTimeout(function(){

ee.location="http://www.abczn.com";

}, 500);

 
var f=window.open();

setTimeout(function(){

f.location="http://www.abczn.com";

}, 600);

 
var g=window.open();

setTimeout(function(){

g.location="http://www.abczn.com";

}, 700);

 
var h=window.open();

setTimeout(function(){

h.location="http://www.abczn.com";

}, 800);

 
var i=window.open();

setTimeout(function(){

i.location="http://www.abczn.com";

}, 900);

 
var j=window.open();

setTimeout(function(){

j.location="http://www.abczn.com";

}, 1000);

 
//方法三

var a = $("<a href='http://www.abczn.com' target='_blank'>Apple</a>").get(0);

var e = document.createEvent('MouseEvents');

e.initEvent( 'click', true, true );

a.dispatchEvent(e);

 
var a = $("<a href='http://www.abczn.com' target='_blank'>Apple</a>").get(0);

var e = document.createEvent('MouseEvents');

e.initEvent( 'click', true, true );

a.dispatchEvent(e);

}

 

);

//-->

</script>

 

新方法:

被拦截的原因:

浏览器安全机制中,页面弹窗,必须是在用户触发的,才算合法弹窗;由ajax或定时执行的弹窗均为非用户触发。会被浏览器或相关安全软件理解为广告被拦截掉;

解决方法一:

<a href="javascript:;" onclick="dialog();">点击弹窗</a>

<script>
function dialog(){
    var popup = window.open('about:blank', '_blank');  //先发起弹窗(因为是用户触发,所以不会被拦截)
    $.ajax({
        url: 'url',
        type: 'POST',
        dataType: 'json',
        data: {param1: 'value1'},
        success: function(data){
            popup.location = data.url;  //在重定向页面链接
        }
    })
}    
</script>

此方法的弊端:

  • 页面ajax弹窗为一次性操作。意思就是:从发起弹窗,到最后的重定向,一整套流程必须是一条线流程。如ajax成功后,做相关用户体验交互的校验(比如只有当校验成功才跳转),那该方法会影响页面交互,具体可自行测试

解决方法二:

<a href="javascript:;" onclick="dialog();">点击弹窗</a>

<script>
function dialog(){
    $.ajax({
        url: 'url',
        type: 'POST',
        dataType: 'json',
        async: false,  // 此处必须定义为同步
        data: {param1: 'value1'},
        success: function(data){
            window.open(data.url, '_blank');  //发起弹窗
        }
    })
}    
</script>

该方法弊端:

  • 实测能解决大部分浏览器的拦截问题,但是解决不了安全软件的拦截(360不会拦截,但是QQ管家会拦截)

解决方法三(有效):

<a href="javascript:;" onclick="dialog();">点击弹窗</a>

<script>
function dialog(){
    $.ajax({
        url: 'url',
        type: 'POST',
        dataType: 'json',
        async: false,  // 此处必须定义为同步
        data: {param1: 'value1'},
        success: function(data){
            gotourl(data.url);  //发起弹窗
        }
    })
}    

/**
 * 弹窗
 * @param  {string} url 跳转链接
 */
function gotourl(url){
    var a = $('<a href="'+ url +'" target="_blank">链接</a>');  //生成一个临时链接对象
    var d = a.get(0);
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );  //模拟点击操作
    d.dispatchEvent(e);
    a.remove();   // 点击后移除该对象
}
</script>

目前该方法亲测有效,可通过浏览器和安全软件;但所有浏览器兼容性未检测,请自行检测!

未经允许不得转载:Free-Abc智能 » window.open打开新窗口被浏览器拦截的处理方法
分享到: 更多 (0)