在 iframe 中加载事件

Question

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

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

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

Answer 1

您可以 select iframe 元素并访问其内部 window 对象。为此，请先为您的 iframe 元素

分配一个 id

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

并访问 window 使用以下内容

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

并且可以访问 window，您可以创建一个脚本标签，其中包含您要在 iframe 中注入的脚本

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

在 iframe 中加载事件

load event inside iframe

javascript

iframe

dom-events