JavaScript中iframe/frame访问属性的contentDocument和contentWindow有什么区别？

Question

JavaScript中iframe/frame访问属性的contentDocument和contentWindow有什么区别？

38

这两个属性（contentDocument 和 contentWindow）之间有什么区别？它们获取 iframe/frame 中的内容的方式是否有所不同？是否存在性能问题？我应该使用 contentXXXXX.document.getElementsBy... 还是 contentXXXXX.getElementsBy...？我在网络上搜索了很多但没有太多信息，在进行深入研究之前，我想问问 stackoverflow 的社区。作为一条评论，我正在编写一个脚本，用于计算网页上的输入次数，访问所有级别的 frame 或 iframe，并将在 frame/iframe 中找到的这些输入添加到全局计数中。所有内容都应来自同一域，因此我认为同源策略不会出现任何问题。对于脚本，我使用的是纯 JavaScript，没有使用 jQuery 或其他使生活更轻松的框架/库。这是一个练习脚本，如果有人想看代码，我会发布它，没有问题。谢谢任何花时间解释的人！

- Samuel Lopez

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Felix Kling · Accepted Answer

我认为<iframe> MDN文档解释得很清楚：

使用 DOM HTMLIFrameElement 对象，脚本可以通过 contentWindow 属性访问被框架资源的 window 对象。contentDocument 属性指的是<iframe> 内部的文档，与 contentWindow.document 相同。

从框架内部，脚本可以通过 window.parent 获取对其父窗口的引用。

脚本访问框架内容受到同源策略的影响。如果脚本来自不同的来源，则无法访问其他窗口对象中的大多数属性... 。

你可以像使用window和document一样使用contentWindow和contentDocument。

还要注意它与 frames property 的关系

window.frames [0] 与 document.getElementsByTagName（“iframe”）[0] .contentWindow是相同的东西

所以这些说法是正确的：

// the window property refers to itself https://developer.mozilla.org/en-US/docs/Web/API/Window/window
window.frames[0] 
=== window.frames[0].window;

// the frames' window *is the same* as contentWindow
window.frames[0].window
=== document.querySelector("iframe").contentWindow;

// the frames' document *is the same* as contentDocument
window.frames[0].window.document
=== document.querySelector("iframe").contentDocument;