contentDocument 和 contentWindow javascript iframe/frame 访问属性

Difference between contentDocument and contentWindow javascript iframe/frame access properties

本文关键字：frame 访问 属性 iframe contentWindow javascript contentDocument      更新时间：2023-09-26
  • 这两个属性(contentDocument 和 contentWindow(之间有什么区别？
  • 他们访问内容的方式是否有任何区别框架/iframe？
  • 是否存在任何性能问题？
  • 我应该使用contentXXXXX.document.getElementsBy...还是 contentXXXXX.getElementsBy... ？

我一直在网络上搜索，但没有找到太多信息，在我做一个大研究之前，我想我可以问问堆栈溢出的伟大社区。作为评论，我正在做一个脚本来计算网页上的输入，访问所有级别的框架或 iframe，并将在框架/iframe 中找到的输入添加到全局计数中。所有内容都应该来自同一个域，所以我相信同源政策应该没有问题。对于脚本，我使用的是纯JavaScript no jQuery或任何框架/库，使jaja u_u生活更轻松。这是一个练习脚本，如果有人想看看代码，我会发布它，没问题。感谢任何花时间解释这一点的人！

我认为<iframe> MDN文档很好地解释了它：

使用 DOM HTMLIFrameElement 对象，脚本可以通过 contentWindow 属性访问框架资源的window对象。contentDocument属性是指<iframe>里面的文档，和contentWindow.document一样。

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

对帧内容的脚本访问受同源策略的约束。如果脚本是从不同的源加载的，则脚本无法访问其他窗口对象中的大多数属性...

因此，您将使用contentWindow与使用window和contentDocument相同的方式使用document。

另请注意它与frames属性的关系

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;
相关文章：