使用noopener参数时如何检测window.open弹窗是否被拦截

带noopener参数调用window.open时返回null是浏览器的规范设计：noopener会主动切断新窗口和父窗口的引用关联，避免新窗口通过window.opener篡改父页面内容，因此传统依赖返回值判断弹窗是否被拦截的方案完全失效。

纯网页端（无扩展依赖）方案 #

纯网页环境下没有能覆盖所有场景的100%精准检测方案，但通过以下两种策略组合，可以把误判率降到可接受范围：

• 焦点转移检测
  浏览器拦截弹窗时，不会触发当前页面的焦点转移；如果弹窗成功打开（哪怕配置了noopener、弹窗在后台打开），绝大多数场景下会触发当前窗口的blur事件。
  实现代码：

  function openNoopenerPopup(url, name) {
    let blocked = true
    const onBlur = () => {
      blocked = false
      window.removeEventListener('blur', onBlur)
    }
    window.addEventListener('blur', onBlur)
    window.open(url, name, 'noopener')
    
    setTimeout(() => {
      window.removeEventListener('blur', onBlur)
      if (blocked) {
        // 弹窗被拦截的处理逻辑
        console.warn('Popup was blocked by browser')
      }
    }, 200)
  }
  

  这个方案的缺陷是：如果用户在调用window.open的200ms内主动切走窗口、或者浏览器配置了弹窗强制静默后台打开不触发焦点变化，会出现误判，可以配合第二种方案兜底。
• 加载信号回传（仅适用于弹窗地址可控的场景）
  如果你要打开的弹窗地址是同源站点，或者你可以在弹窗目标页面插入自定义脚本，可以通过跨页面通信通道回传加载成功信号，父页面超时未收到信号即可判定为拦截。
  父页面实现：

  function openControllablePopup(url, name) {
    let blocked = true
    const channel = new BroadcastChannel('popup-status')
    channel.onmessage = (e) => {
      if (e.data === 'loaded') {
        blocked = false
        channel.close()
      }
    }
    window.open(url, name, 'noopener')
  
    setTimeout(() => {
      channel.close()
      if (blocked) {
        console.warn('Popup was blocked by browser')
      }
    }, 3000)
  }
  

  弹窗页面内插入的代码：

  const channel = new BroadcastChannel('popup-status')
  channel.postMessage('loaded')
  channel.close()
  

  这个方案的准确率接近100%，但仅适用于弹窗页面可插入自定义代码的场景。

Chrome MV3 扩展方案 #

如果可以通过浏览器扩展实现能力补充，可以完全不受noopener参数、跨域限制的影响，实现100%精准检测，核心是通过扩展的窗口监听API判断新窗口是否成功创建：

1. 首先在manifest.json中声明所需权限：

   {
     "manifest_version": 3,
     "permissions": ["windows", "tabs"],
     "host_permissions": ["<all_urls>"],
     "background": {
       "service_worker": "background.js"
     },
     "content_scripts": [
       {
         "matches": ["<all_urls>"],
         "js": ["content.js"]
       }
     ]
   }
   

2. 页面需要打开弹窗时，通过content script把目标URL传给后台service worker，后台监听新窗口创建事件，匹配对应URL的窗口是否在调用后短时间内创建即可：
   background.js 实现：

   chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
     if (msg.type !== 'check-popup' || !msg.targetUrl) return
     let opened = false
   
     const checkWindow = async (newWindow) => {
       const tabs = await chrome.tabs.query({windowId: newWindow.id})
       if (tabs.some(tab => tab.url.startsWith(msg.targetUrl))) {
         opened = true
         chrome.windows.onCreated.removeListener(checkWindow)
         sendResponse({blocked: false})
       }
     }
   
     chrome.windows.onCreated.addListener(checkWindow)
     setTimeout(() => {
       chrome.windows.onCreated.removeListener(checkWindow)
       if (!opened) sendResponse({blocked: true})
     }, 1000)
   
     return true
   })
   

补充：你问题中贴的传统检测代码存在逻辑错误，window.open被拦截时会直接返回null，不需要判断closed属性，正确的传统检测写法为：

const popupRef = window.open(url, name)
const notBlocked = popupRef !== null

内容的提问来源于stack exchange，提问作者Fez Vrasta