使用window.open()方法打开新页面,被浏览器拦截问题

本文探讨了在不同情况下window.open方法被浏览器拦截的问题,并提供了两种有效的解决方案:一是通过创建并触发a标签实现新窗口打开;二是先打开一个空白窗口再进行内容加载。这两种方法能够绕过浏览器对于非用户主动触发弹窗的限制。

当window.open为用户触发事件内部或者加载时,不会被拦截,一旦将弹出代码移动到一段异步代码内部,马上就出现被拦截的表现了

当浏览器检测到非用户操作产生的新弹出窗口,则会对其进行阻止。因为浏览器认为这可能是一个广告,不是一个用户希望看到的页面。

解决方案一:

  1. function newWin(url, id) {  
  2.               var a = document.createElement(‘a‘);  
  3.               a.setAttribute(‘href‘, url);  
  4.               a.setAttribute(‘target‘, ‘_blank‘);  
  5.               a.setAttribute(‘id‘, id);  
  6.               // 防止反复添加  
  7.               if(!document.getElementById(id)) {                       
  8.                   document.body.appendChild(a);  
  9.               }  
  10.               a.click();  
  11.   } 

这种方案不适用与异步代码中。

解决方案二:

let newWindow = window.open("about:blank","_blank");

  1. $.ajax({  
  2.         type: "post",  
  3.         url: "/xxxx/xxxx",  
  4.         data: {"param": param},  
  5.         error: function (data) {  
  6.             showError(data);  
  7.         },  
  8.         success: function (data) {  
  9.             if (data.errorFlag == 0) {  
  10.                 // 新加  
  11.                 newTab.location.href = "www.baidu.com";  
  12.             } else {  
  13.                 layer.alert(data.desc, {icon: 2, title: '提示信息'})  
  14.             }  
  15.         }  
  16.     }); 

### 如何避免浏览器拦截 `window.open()` 调用 浏览器通常会对 `window.open()` 方法进行拦截,尤其是当该方法的调用是由用户直接触发的,或者是在异步操作(如 AJAX 请求)中调用的。为了有效避免浏览器拦截 `window.open()` 的行为,可以采取以下几种策略: #### 1. 确保 `window.open()` 是由用户交互触发的 浏览器通常会允许由用户直接触发的 `window.open()` 调用,例如点击按钮或键盘事件。如果 `window.open()` 是在用户交互事件的回调中直接调用的,那么被拦截的可能性较低。 ```javascript document.getElementById('openWindowButton').addEventListener('click', function() { window.open('https://example.com', '_blank'); }); ``` #### 2. 在 AJAX 请求之前调用 `window.open()` 如果需要在 AJAX 请求完成后打开新窗口,可以在 AJAX 请求开始之前先调用 `window.open()`,打开一个空白页面(如 `about:blank`),然后在 AJAX 请求成功后将该窗口的 `location` 属性设置为目标 URL。这种方法可以绕过浏览器拦截机制,因为 `window.open()` 是在用户交互的上下文中调用的。 ```javascript var newWindow = window.open('about:blank', '_blank'); $.ajax({ url: 'https://api.example.com/data', success: function(response) { newWindow.location = response.url; } }); ``` #### 3. 检查 `window.open()` 是否成功执行 在某些情况下,即使 `window.open()` 被调用,浏览器也可能返回 `undefined`,表示弹出窗口被拦截。可以通过检查返回值来判断是否成功打开了新窗口,并在失败时提供替代方案,例如显示一个提示信息或提供一个超链接让用户手动打开。 ```javascript var newWindow = window.open('https://example.com', '_blank'); if (!newWindow || newWindow.closed || typeof newWindow.closed === 'undefined') { alert('弹出窗口被拦截,请手动点击以下链接:https://example.com'); } ``` #### 4. 使用 `window.open()` 打开本地文件 `window.open()` 方法也可以用于打开本地文件,但需要注意的是,出于安全考虑,浏览器通常允许直接访问本地文件系统。因此,这种方法通常只适用于本地开发环境或特定的应用场景,如 Electron 应用程序。 ```javascript window.open('file:///C:/path/to/local/file.html', '_blank'); ``` #### 5. 提供替代方案 考虑到某些浏览器可能会始终拦截 `window.open()` 调用,尤其是在非用户交互的上下文中调用时,建议提供一个替代方案,例如显示一个超链接或按钮,让用户手动点击以打开新窗口。这仅可以提高用户体验,还可以避免因弹出窗口被拦截而导致的功能失效。 ```html <a href="https://example.com" target="_blank">点击此处打开新窗口</a> ``` 通过以上方法,可以有效地避免浏览器对 `window.open()` 的拦截,确保新窗口能够顺利打开。然而,需要注意的是,浏览器对弹出窗口的处理方式可能有所同,因此在实际应用中应进行充分的测试,以确保兼容性和用户体验。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值