如何将含import的ES6 JavaScript代码注入iframe？

你遇到的问题核心在于：普通的<script>标签默认是传统脚本模式，不支持ES6模块的import语法。要解决这个问题，你需要使用type="module"的脚本标签，同时还要处理模块路径的浏览器兼容性问题。下面是具体的解决方案：

关键注意事项 #

• 同源限制：只有当iframe和父页面是同源（协议、域名、端口都一致）时，你才能通过contents()访问iframe的DOM，这是浏览器同源策略的要求。如果是跨域iframe，这种直接注入的方法会被阻止。
• 模块路径：浏览器原生ES模块不支持直接引用npm包名（比如@medv/finder），你需要把它替换成可直接访问的CDN URL。

解决方案1：通过字符串注入模块脚本 #

这种方法和你之前用的方式类似，但需要指定脚本类型为module，并替换模块的CDN路径：

// 等待iframe加载完成后再注入
$("iframe").on('load', function() {
  const iframeContents = $(this).contents();
  // 构造模块脚本内容，注意转义闭合的</script>标签
  const moduleScript = `
    <script type="module">
      import finder from 'https://cdn.jsdelivr.net/npm/@medv/finder@2.0.0/dist/finder.min.js';
      document.addEventListener('mouseover', event => {
        const selector = finder(event.target);
        console.log(selector);
      }, true);
    <\/script>
  `;
  iframeContents.find("body").append(moduleScript);
});

解决方案2：创建模块脚本元素（更推荐） #

这种方式不需要处理字符串转义问题，直接创建script元素并设置type="module"，然后添加到iframe中：

$("iframe").on('load', function() {
  // 获取iframe的文档对象
  const iframeDoc = this.contentDocument || this.contentWindow.document;
  
  // 创建模块脚本元素
  const script = iframeDoc.createElement('script');
  script.type = 'module';
  // 写入模块代码，这里直接用CDN链接引入finder
  script.textContent = `
    import finder from 'https://cdn.jsdelivr.net/npm/@medv/finder@2.0.0/dist/finder.min.js';
    document.addEventListener('mouseover', event => {
      const selector = finder(event.target);
      console.log(selector);
    }, true);
  `;
  
  // 将脚本添加到iframe的body中
  iframeDoc.body.appendChild(script);
});

额外提示 #

• 提前加载的iframe：如果iframe在你的代码执行前已经加载完成，load事件不会触发，你可以直接执行注入逻辑，或者先检查iframe的readyState：

  const $iframe = $("iframe");
  if ($iframe[0].readyState === 'complete') {
    // 直接执行注入代码
  } else {
    $iframe.on('load', /* 注入逻辑 */);
  }
  

• CDN版本选择：上面用的是@medv/finder的2.0.0版本，你可以根据需要替换为最新版本，或者使用其他CDN（比如unpkg）。
• 跨域iframe的替代方案：如果是跨域iframe，你无法直接注入脚本，这时候需要和iframe的页面开发者配合，通过postMessage传递指令，由iframe内部的代码执行相应逻辑。

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