JavaScript打开新窗口被拦截问题

Posted 2020-11-03 Sun·傲宇

新窗口打开页面，一个很常用的效果，至于代码，一般第一反应都是这么写：

window.open(url);

但是主流的浏览器都会拦截这种效果（可能这些年弹窗广告太多，如果浏览器不拦截，用户受不了）

 

为了避免弹窗被拦截，一般都是利用a标签来打开一个新的页面，利用a标签的target="_blank"属性，一般根据情况使用下面这两种方法：

1、由点击事件触发新窗口打开：

----当然可以直接在页面使用a标签，这里只是为下文做铺垫的啦！

<a href="http://www.baidu.com/" target="_blank"></a>

可以将触发点击的按钮改成：

<a href="javascript:void(0)"  target="_blank" id="openWindow"></a>  

点击事件写成 ：

1 $("#openWindow").click(function(e){  
2     $(this).attr("href","http://www.baidu.com/");  
3 });  

按照事件触发的顺序，点击的时候修改a标签的href，然后不中断默认事件，会接着触发a标签的默认事件，打开一个新的页面。

注意：如果需要打开新窗口，click事件中不能使用return false，e.preventDefault();等中断默认事件的语句。

 

2、其他情况：如果没有一个a标签用来打开页面，那么我们就创造一个新的a标签出来，再模拟这个a标签的点击事件

jQuery写法：

1 function openWindow(url){  
2      var link = $("<a></a>").attr("href",url).attr("target","_blank");  
3      $("body").append(link);  
4      link[0].click();  
5      link.remove();  
6  }

原生JavaScript写法：

1 function openWindow(url){  
2     var link = document.createElement(‘a‘);  
3     link.target = "_blank";  
4     link.href = url;  
5     document.body.appendChild(link);  
6     link.click();  
7     document.body.removechild(link);  
8 }