如何动态加载JS脚本且不污染页面命名空间？获取导出变量不修改window对象

这个需求做嵌入第三方网站的脚本时太常见了，最怕不小心污染宿主页面的全局变量！我刚好研究过靠谱的实现方案，核心就是给脚本找个独立的「沙箱」运行，最稳妥的就是用iframe——它有自己完全独立的全局上下文，根本碰不到主页面的window对象。

核心思路 #

让目标脚本在iframe的独立环境里加载，脚本只会把变量挂载到iframe专属的window上，等加载完成后我们把需要的变量提取出来，再销毁iframe，全程不会对主页面的全局空间造成任何影响。

具体实现代码 #

我们可以封装一个someMagic函数，它返回Promise（毕竟脚本加载是异步操作），最终能拿到我们需要的库变量：

function someMagic() {
  return new Promise((resolve, reject) => {
    // 创建隐藏的iframe作为沙箱，避免影响页面布局
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);

    const iframeWindow = iframe.contentWindow;
    const iframeDoc = iframeWindow.document;

    // 创建要加载的script元素
    const script = iframeDoc.createElement('script');
    // 替换成你需要加载的脚本地址，比如React的CDN链接
    script.src = 'https://unpkg.com/react@18/umd/react.production.min.js';
    
    script.onload = () => {
      // 从iframe的window里提取目标变量
      const targetLib = iframeWindow.React;
      // 销毁iframe，清理冗余资源
      document.body.removeChild(iframe);
      // 返回提取到的变量
      resolve(targetLib);
    };
    
    script.onerror = (error) => {
      // 加载失败时清理iframe并抛出错误
      document.body.removeChild(iframe);
      reject(error);
    };

    // 将script插入到iframe的文档中开始加载
    iframeDoc.body.appendChild(script);
  });
}

// 按你的需求测试使用
(async function () {
  try {
    const React = await someMagic();
    console.log('成功获取React:', React);
    console.log('主页面window.React是否存在？', !!window.React); // 输出false，完全没污染
  } catch (error) {
    console.error('脚本加载失败:', error);
  }
})();

细节补充 #

• 加载多个依赖脚本时，可以调整逻辑，等所有脚本都加载完成后再提取变量
• iframe用完就销毁，不会在页面留下多余DOM元素
• 整个过程完全隔离主页面和加载的脚本，宿主页面的全局变量不会有任何意外修改

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