为什么添加 <脚本> 来动态创建的 <iframe> 似乎在父页面运行脚本？

在前端开发中，我们常常会用到 iframe 标签来嵌入其他网页。有时候，我们需要使用 JavaScript 动态地创建一个 iframe 元素，并在其中加载外部内容。然而，一些开发者却发现，似乎在父页面中添加 <脚本>标签，可以影响到子页面中的 JS 执行。

原因

这种现象的原因是由于 iframe 标签的特性所造成的。如果在 iframe 中没有设置 sandbox 属性，那么 iframe 的内容就拥有了和父页面相同的全局作用域。也就是说，如果在父页面中定义了某个变量或函数，那么在 iframe 中也可以访问到并执行该变量或函数。

因此，如果在父页面中添加了带有 src 属性的 <脚本> 标签，它就会在父页面和 iframe 页面中都被执行。这就是为什么看起来像是在父页面中运行脚本。

解决方案

为了避免这种情况的发生，我们可以在动态创建 iframe 的时候，给它添加 sandbox 属性。这个属性可以限制 iframe 的权限，使其无法访问父页面的全局作用域。具体来说，可以使用以下代码：

<iframe id="myframe" sandbox="allow-scripts"></iframe>

<script>
  const iframe = document.querySelector('#myframe');
  iframe.src = 'https://example.com';
</script>

在这个例子中，我们在 iframe 中设置了 sandbox 属性，并允许其中运行脚本。这样就可以避免在父页面中添加的脚本影响到 iframe 中的 JS 执行。

另外，如果需要在父页面中操作 iframe 中的内容，可以使用 postMessage API 来进行跨域通信。

结论

在动态创建 iframe 的时候，一定要注意它的权限问题。如果没有设置 sandbox 属性，则会和父页面共享全局作用域，可能导致意想不到的问题。为了避免这种情况的发生，可以给 iframe 添加 sandbox 属性，并使用 postMessage API 进行跨域通信。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24170