在 iframe 中加载事件答案

【问题标题】：load event inside iframe在 iframe 中加载事件
【发布时间】：2021-10-08 15:38:38
【问题描述】：

我正在尝试在 iframe 加载后在 iframe 中运行一些 javascript，但遇到了问题。我不确定这是否意味着我对正在发生的事情的概念是错误的，还是我的代码是错误的。

我想要做的是在 iframe 环境中加载一个 javascript 文件，然后调用一个函数。（iframe 内容是使用单个文件捕获并从我的服务器提供的静态网页。我希望能够为 iframe 页面中的图像弹出菜单）。这是可能的，还是出于安全考虑而被阻止？我可以从 iframe 中获取 contentDocument 并查看其中的内容，但不对其进行任何更改。向 iframe 添加加载事件侦听器在顶级 DOM 中运行，而不是 iframe。

一个丑陋的解决方法是在我提供的每个 html 文件中添加一行加载脚本，但我不愿意这样做，因为它看起来有点脆弱。这是我唯一的选择吗？

【问题讨论】：

stackoverflow.com/questions/3142837/…

标签： javascript iframe dom-events

【解决方案1】：

您可以选择 iframe 元素并访问其内部窗口对象。为此，首先为您的 iframe 元素分配一个 id

<iframe id="chosen-iframe" ...></iframe>

并使用以下方法访问窗口

const iframe = document.getElementById('chosen-iframe');
const iFrameWindowElement = iframe.contentWindow;

通过访问窗口，您可以创建一个脚本标签，其中包含要在 iframe 中注入的脚本

  var injectedScript = iFrameWindowElement.document.createElement("script");
  injectedScript.append(...);
  iFrameWindowElement.document.documentElement.appendChild(script);

【讨论】：

谢谢，我非常接近这个过程，但还没有完全掌握。有了你的保证，我得到了它的工作。我认为这需要在 iframe 上的加载事件侦听器中完成，以便 iframe DOM 准备就绪。似乎能够做到这一点可能会带来安全风险，不是吗？
@russell 是的。如果您尝试将事件侦听器附加到 dom 元素，则需要使用 onload 事件。至于安全风险，您可以使用 HTML 标头限制您的网页在 iframe 中显示。至于访问父窗口的 iframe，有一个沙箱参数限制了这一点。