在前端开发中，经常会使用 iframe 元素来嵌入其他网站的页面或者展示自己的内容。但是有时候需要获取这个 iframe 中的内容，比如需要对嵌入的页面进行一些操作或者获取其中的数据。本文将介绍几种在 iframe 元素中获取内容的方式。
通过 window.frames 属性访问 iframe
我们可以通过 window.frames 属性来访问当前文档中所有的 iframe 元素，然后再通过索引或者 name 属性来访问指定的 iframe 元素。例如：
-- --------- ------ -- --- ------ - ----------------- -- ---- ---- ------- ------ -- --- ------ - ---------------------------
然后就可以通过 iframe.contentWindow 属性来访问 iframe 中的 window 对象，从而获取其中的内容。例如：
--- ------ - ----------------- --- ------------ - --------------------- --- -------------- - ---------------------- --- ------------- - -----------------------------------------
这种方法比较简单直接，但是需要注意的是，如果 iframe 中的页面和当前页面不在同一个域名下，那么由于浏览器的同源策略，我们无法访问 iframe 中的内容。
使用 postMessage 跨域通信
上面提到了浏览器的同源策略会限制我们访问来自其他域名的 iframe 中的内容。那么有没有办法解决这个问题呢？答案是可以的，我们可以使用 HTML5 中引入的 postMessage 方法来进行跨域通信。
具体来说，我们可以在 iframe 中通过 window.parent.postMessage() 方法向父窗口发送消息，父窗口再通过 window.addEventListener('message', handler) 监听消息，并进行相应的处理。示例如下：
-- - ------ -----
-------------------------------- ---- -------- ----------------------
-- ---------
---------------------------------- --------------- -
-- ------------- --- ------------------- -- ---------- --- ------ ---- -------- -
--- ------------- - ------------------------------------------------
-- ------ ------ --
-
---这种方法需要在 iframe 和父窗口都添加相应的代码才能正常工作，但是可以有效地解决跨域访问的问题。
使用 fetch 或 XMLHttpRequest 获取 iframe 内容
除了上面介绍的两种方法，我们还可以使用 fetch 或者 XMLHttpRequest 对 iframe 的地址进行请求，从而获取其中的内容。例如：
------------------------------------------------
-------------- -- ----------------
---------- -- -
-- ------ ------ --
---这种方法不需要访问 iframe 的 window 对象，因此也可以跨域获取 iframe 中的内容。但是需要注意的是，由于同源策略的限制，我们无法获取到来自其他域名的 iframe 中的 cookie 等敏感信息。
总结
通过本文的介绍，我们了解了几种在 iframe 元素中获取内容的方式。需要根据实际情况来选择使用哪种方式。如果不涉及跨域问题，那么直接访问 iframe 的 contentWindow 属性就可以了。如果涉及跨域问题，可以使用 postMessage 或者 fetch 等方式进行获取。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9447