window.open打开的新窗口挂载script被删除无法调用API如何解决

你遇到的脚本被移除的情况通常是以下几个原因导致的：

1. 插入时机错误：调用window.open后立即操作新窗口DOM，此时新窗口还处于about:blank的临时文档阶段，等目标页面加载完成后整个文档会被完全重写，你插入的临时文档里的元素会被全部清除
2. 同源策略限制：如果当前站点和你打开的https://example.com不属于同域，浏览器会禁止你操作跨域窗口的DOM，插入的脚本要么无法生效，要么在页面切换到跨域地址后被清除
3. 新窗口安全策略限制：新窗口配置了CSP（内容安全策略），不允许加载你的外部脚本域名，或者新窗口自身逻辑会清理非白名单的第三方脚本标签

方案1：同域场景下调整插入时机 #

如果当前站点和https://example.com是同域，只需要等新窗口页面加载完成后再插入脚本即可，避免被页面重写覆盖：

function handleAction() {
  const win = window.open('https://example.com', "_blank");
  // 监听新窗口加载完成事件再插入脚本
  win.addEventListener('load', () => {
    const script = win.document.createElement('script');
    // 优先用内联脚本，避免外部资源被CSP拦截
    script.textContent = `
      // 直接写入你原本在example.js里的日志调用逻辑
      (function() {
        // 你的API请求代码，自执行保证插入即调用
        fetch('你的日志接口地址', {
          method: 'POST',
          body: JSON.stringify({action: 'new_window_open'})
        });
      })();
    `;
    win.document.head.appendChild(script);
  }, {once: true});
}
window.onload = handleAction

脚本只要完成执行，后续就算被新窗口逻辑移除标签，已经发起的API请求也不会中断。

方案2：跨域场景下通过URL参数传递标识 #

跨域时你无法直接操作新窗口DOM，最稳定的方案是修改新窗口的逻辑，通过URL传参控制新窗口主动加载脚本：

• 打开新窗口时携带自定义参数：const win = window.open('https://example.com?load_my_script=1', "_blank");
• 在https://example.com的页面逻辑中新增判断：如果URL中存在load_my_script=1的参数，就主动创建script标签加载http://myassets.com/example.js

方案3：无需新窗口上下文时直接在父窗口调用API #

如果你的日志调用不需要获取新窗口的上下文数据，完全不需要往新窗口插入脚本，直接在父窗口的handleAction逻辑里发起API请求即可，不会有任何被拦截的问题。

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