contentWindow，和contentDocument区别，及iframe访问

一、contentWindow 和contentDocument的区别

在了解contentWindow和contentDocument的区别之前，我们需要先了解iframe标签。

iframe标签是用于在一个HTML文档中嵌入另一个HTML文档的标签，它可以将不同网页嵌入到当前页面中的一个独立窗口中。

每个iframe都有一个自己的window对象和一个document对象。其中，window对象是代表整个窗口，而document对象是代表iframe内部的文档。

contentWindow和contentDocument是分别代表iframe标签的window对象和document对象。

具体来说，contentWindow是一个指向iframe窗口的指针，可以用来在iframe和主文档之间进行通信，而contentDocument则是指向iframe内部文档的指针，可以用来访问和操作iframe内部的元素和内容。

在实际应用中，我们可以使用以下代码来获取iframe的contentWindow和contentDocument：

```javascript

var iframe = document.getElementById("my-iframe");

var iframeWindow = iframe.contentWindow;

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; // 兼容低版本IE浏览器

```

值得注意的是，contentDocument属性在IE8及以下版本的浏览器中可能无法正常工作，因此需要使用兼容性代码。

二、iframe访问

1.iframe和主文档之间的通信

使用contentWindow对象，我们可以在iframe和主文档之间进行双向通信。

在主文档中，我们可以使用以下代码来向iframe发送消息：

```javascript

var iframe = document.getElementById("my-iframe");

iframe.contentWindow.postMessage("hello", "http://example.com");

```

其中，第一个参数是要发送的消息，第二个参数是接收消息的iframe的源地址。

在iframe内部，我们可以使用以下代码来监听主文档发送的消息：

```javascript

window.addEventListener("message", function(event) {

if (event.origin === "http://example.com") { // 判断消息来源

console.log("Received message: " + event.data);

}

});

```

这里使用了window对象的message事件来监听消息，如果消息来源是指定的源地址，则通过event.data获取消息内容。

2.使用contentDocument对象操作iframe内部的元素和内容

使用contentDocument对象，我们可以直接访问和操作iframe内部的元素和内容。

比如，在主文档中，我们可以使用以下代码来获取iframe内部的第一个p元素：

```javascript

var iframe = document.getElementById("my-iframe");

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; // 兼容低版本IE浏览器

var p = iframeDocument.querySelector("p");

```

在iframe内部，我们也可以使用以下代码来获取主文档中的第一个p元素：

```javascript

var p = parent.document.querySelector("p");

```

其中，parent属性代表iframe的父级文档，也就是主文档。

三、案例说明

以下是一个通过iframe与主文档之间进行通信的简单案例：

在主文档中，我们定义了一个iframe和两个按钮，分别用于向iframe发送消息和从iframe中获取消息：

```html

向iframe发送消息

获取iframe发送的消息

```

在iframe中，我们定义了一个按钮，用于向主文档发送消息：

```html

向主文档发送消息

```

这里我们向主文档发送了一个消息"world"，源地址为"https://www.example.com"。在主文档中，我们通过监听消息事件来获取这个消息，并将它保存在receivedMsg变量中。当点击获取消息按钮时，我们通过console.log打印出receivedMsg的值。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/