如何使用 Javascript 访问和操作 Iframe 的内容？

在 Javascript 中检索 iframe 的内容

在 Javascript 中获取 iframe 的正文内容需要特定的方法。虽然 jQuery 提供了一种简单的方法，但纯 Javascript 提供了同样有效的解决方案。

纯 Javascript 方法

1. 获取 iframe 元素：

   • var iframe = document.getElementById('id_description_iframe');
   • var iframe = document.querySelector('#id_description_iframe');

2. 检索 iframe 的文档:

   • var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

此方法适用于大多数浏览器，因为它首先检查 contentDocument 属性，然后回退到 contentWindow.document 以实现 Internet Explorer 兼容性。

选择元素并调用函数

一旦您有了 iframe 文档，您可以使用标准的 Javascript 方法与其进行交互：

• 通过 ID 获取元素：iframeDocument.getElementById('frameBody');
• 使用 CSS 选择器：iframeDocument .querySelectorAll('#frameBody');
• 检索 iframe 窗口：var iframeWindow = iframe.contentWindow;

• 在 iframe 窗口上调用函数或访问变量：

  • iframeWindow.myVar = window.myVar;
  • var myVar = iframeWindow.myFunction(param1 /*, ... */);

注意事项

使用 iframe 时请记住考虑同源策略。如果 iframe 和父文档来自不同来源，则可能适用跨源限制。

以上是如何使用 Javascript 访问和操作 Iframe 的内容？的详细内容。更多信息请关注PHP中文网其他相关文章！