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