在 iframe 元素中获取内容的方式-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常会使用 iframe 元素来嵌入其他网站的页面或者展示自己的内容。但是有时候需要获取这个 iframe 中的内容，比如需要对嵌入的页面进行一些操作或者获取其中的数据。本文将介绍几种在 iframe 元素中获取内容的方式。

通过 window.frames 属性访问 iframe

我们可以通过 window.frames 属性来访问当前文档中所有的 iframe 元素，然后再通过索引或者 name 属性来访问指定的 iframe 元素。例如：

// 根据索引获取第一个 iframe 元素
var iframe = window.frames[0];

// 或者根据 name 属性获取指定的 iframe 元素
var iframe = window.frames['my-iframe'];

然后就可以通过 iframe.contentWindow 属性来访问 iframe 中的 window 对象，从而获取其中的内容。例如：

var iframe = window.frames[0];
var iframeWindow = iframe.contentWindow;
var iframeDocument = iframeWindow.document;
var iframeContent = iframeDocument.documentElement.innerHTML;

这种方法比较简单直接，但是需要注意的是，如果 iframe 中的页面和当前页面不在同一个域名下，那么由于浏览器的同源策略，我们无法访问 iframe 中的内容。

使用 postMessage 跨域通信

上面提到了浏览器的同源策略会限制我们访问来自其他域名的 iframe 中的内容。那么有没有办法解决这个问题呢？答案是可以的，我们可以使用 HTML5 中引入的 postMessage 方法来进行跨域通信。

具体来说，我们可以在 iframe 中通过 window.parent.postMessage() 方法向父窗口发送消息，父窗口再通过 window.addEventListener('message', handler) 监听消息，并进行相应的处理。示例如下：

-- -------------------- ---- -------
-- - ------ -----
-------------------------------- ---- -------- ----------------------

-- ---------
---------------------------------- --------------- -
  -- ------------- --- ------------------- -- ---------- --- ------ ---- -------- -
    --- ------------- - ------------------------------------------------
    -- ------ ------ --
  -
---

这种方法需要在 iframe 和父窗口都添加相应的代码才能正常工作，但是可以有效地解决跨域访问的问题。

使用 fetch 或 XMLHttpRequest 获取 iframe 内容

除了上面介绍的两种方法，我们还可以使用 fetch 或者 XMLHttpRequest 对 iframe 的地址进行请求，从而获取其中的内容。例如：

fetch('https://other-site.com/iframe-page.html')
  .then(response => response.text())
  .then(html => {
    // 处理获取到的 iframe 内容
  });

这种方法不需要访问 iframe 的 window 对象，因此也可以跨域获取 iframe 中的内容。但是需要注意的是，由于同源策略的限制，我们无法获取到来自其他域名的 iframe 中的 cookie 等敏感信息。

总结

通过本文的介绍，我们了解了几种在 iframe 元素中获取内容的方式。需要根据实际情况来选择使用哪种方式。如果不涉及跨域问题，那么直接访问 iframe 的 contentWindow 属性就可以了。如果涉及跨域问题，可以使用 postMessage 或者 fetch 等方式进行获取。

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