contentWindow，和contentDocument区别，及iframe访问

contentWindow 和contentDocument 都是用于访问iframe中的内容的属性。它们的区别在于，contentWindow 返回的是一个窗口对象，而contentDocument 返回的是一个文档对象。

contentWindow 属性可以用于访问iframe内部的Window对象，通过该对象可以进行页面的操作和交互。例如，可以通过contentWindow.document来获取iframe内部的文档对象，然后可以通过该文档对象进行元素的查询和修改。contentWindow 还可以用于设置iframe的样式、绑定事件等操作。

contentDocument 属性返回的是一个iframe内部的文档对象，它是一个HTMLDocument对象。可以通过该文档对象来进行对iframe内部内容的操作，例如查询元素、修改元素样式、插入新元素等。与contentWindow 不同的是，contentDocument 不支持通过属性的方式直接访问iframe的样式、事件绑定等。

下面是一个使用 contentWindow 和contentDocument 访问iframe的示例：

HTML 代码：

```html

```

JavaScript 代码：

```javascript

var iframe = document.getElementById("myFrame");

// 使用 contentWindow 访问 iframe 内部的内容

var iframeWindow = iframe.contentWindow;

var iframeDocument = iframe.contentWindow.document;

iframeDocument.getElementById("myElement").textContent = "Hello World";

// 使用 contentDocument 访问 iframe 内部的内容

var iframeDocument = iframe.contentDocument;

iframeDocument.getElementById("myElement").textContent = "Hello World";

```

上面的示例中，我们首先通过getElementById 方法获取到了 id 为myFrame的iframe元素。然后，分别使用contentWindow 和contentDocument 属性访问了iframe内部的内容。最后，使用了内部文档对象的getElementById 方法找到了id 为myElement 的元素，并修改了该元素的textContent属性。

需要注意的是，由于同源策略的限制，对于不同域名的iframe，使用contentWindow 和contentDocument 访问其内容可能会受到限制。在跨域的情况下，可以考虑使用postMessage 方法进行跨文档通信。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/