在动态创建的 iframe 中触发 Javascript

Posted 2023-05-09

【中文标题】在动态创建的 iframe 中触发 Javascript

【英文标题】：Triggering Javascript inside dynamically created iframe

【发布时间】：2014-07-20 17:54:55

【问题描述】：

我目前正在构建一个 chrome 扩展程序，每当用户单击我的 chrome 扩展程序的按钮时，我都设法使用 iframe 制作弹出窗口。

在我的 iFrame 中，我正在加载 2 个 .js 文件：jQuery 和来自 chrome 扩展的“modal.js”。 进行检查时，我可以看到文件已加载（modal.js），但是我使用的是以下代码，该代码未触发：

  $('#frameID').ready(function()
    $('#sbm-new-group').click(function()
      console.log("hello");
     );
  );

这不起作用，即使我尝试使用 $(document).ready，也没有任何反应。我想知道是否有任何方法使用 iFrame 中的 javascript 触发该方法。

非常感谢任何帮助。

【问题讨论】：

没有足够的信息来诊断问题。 #sbm-modal 是什么？

我已经编辑过了，是iFrame的ID。

您是使用内容脚本注入浏览器页面本身，还是使用标准的 Chrome browser_action:default_popup 定义？

请记住，<iframe> 包装了它自己独立的 #document 和 Window，要访问内部，您需要通过例如ifrm.contentWindow

Abe：是的，我正在使用内容脚本来加载 iframe。 Paul：这就是我需要帮助的地方，我不明白如何在 iframe 出现时“触发”，在 iFrame 的 JS 中模拟 document.ready

【参考方案1】：

您应该访问 iframe 的 document 以绑定 .ready() 处理程序。 这是demo fiddle。

注意：如果您在同一个域中，这是可能的。

var iframe = document.getElementById('frameID'),
    iframeWin = iframe.contentWindow || iframe,
    iframeDoc = iframe.contentDocument || iframeWin.document;

$(iframeDoc).ready(function (event) 
    alert('iframe ready');
    // now you can access any element in the iframe (if same domain)
    $(iframeDoc).find('#sbm-new-group').on('click', function (event) 
         alert('clicked');
    );
);

[编辑] 附加说明：

要在 owner 全局范围内调用函数，从 iframe 文档：

parent.someMethod();

要在 iframe 全局范围内调用函数，从所有者文档：

iframeWin.someMethod();

要在 iframe 中执行脚本，来自所有者文档：

// this is called from the iframe
window.hello = function () 
    alert('hello from owner!');
;

// we'll write some scripts within the iframe that will be executed immediately
iframeDoc.open();
iframeDoc.write('\<script>alert("hello from iframe!");\<\/script>');
iframeDoc.write('\<script>parent.hello();\<\/script>');
iframeDoc.close();

这里是another fiddle 演示这个。

【讨论】：

警告：当它来自另一个域时，你不能这样做。

问题：如何触发 $(document).keyup 事件？

您可以按照示例中所示的方式进行操作：$(iframeDoc).on('keyup', function (event) console.log(event.keyCode); );

这是“最干净”的方法吗？我试图避免使用 $(iframeDoc).find 绑定事件...认为可能有更清洁的方法。

从所有者文档中，如果您想 (a) 知道 iframe 文档何时准备就绪； (b) 从所有者文档中操作 iframe DOM； ——这就是这样做的方法。我在答案中添加了一些额外的注释，关于执行脚本/调用函数。