ContentDocument 和contentWindow javascript iframe/ frame 访问属性的区别

在JavaScript中，当我们使用iframe或frame嵌入另一个网页时，可以通过contentDocument和contentWindow这两个属性来访问iframe的内容和窗口。这两个属性有着明显的区别，以下是详细介绍：

contentDocument

contentDocument属性返回iframe内部的文档对象，即DOM树。这允许我们访问和操作iframe中的HTML内容。使用contentDocument时，我们可以像处理主页面的DOM一样处理iframe中的DOM。

示例: 假设我们有一个名为myIframe的iframe，我们想要更改iframe中的某个元素的文本，可以这样做：

javascript
var iframeDocument = document.getElementById('myIframe').contentDocument;
var heading = iframeDocument.getElementsByTagName('h1')[0];
heading.textContent = "新标题";

contentWindow

contentWindow属性返回iframe的窗口对象，即window对象。这允许我们访问和操作iframe的全局变量、函数等。使用contentWindow时，可以调用iframe中定义的JavaScript函数，或者操作它的全局变量。

示例: 假设iframe中有一个名为updateHeader的函数，我们可以通过contentWindow来调用这个函数：

javascript
var iframeWindow = document.getElementById('myIframe').contentWindow;
iframeWindow.updateHeader("新的标题");

总结

总的来说，contentDocument用于直接操作iframe中的DOM，而contentWindow则提供了一个接口来访问和操作iframe的window对象，包括其中的全局变量和函数。这两者的使用取决于你的具体需求，比如是否需要直接修改DOM或调用iframe中的JavaScript函数等。

这两个属性都需要注意同源策略的限制，如果iframe加载的页面与主页面不同源，则无法使用这些属性。如果确实需要进行跨域操作，可以考虑使用postMessage等技术进行安全的跨域通信。