contentWindow，和contentDocument区别，及iframe访问

一、contentWindow和contentDocument区别

在对Iframe进行操作时，我们常常需要使用到contentWindow和contentDocument这两个属性，然而这两个属性的作用是有区别的。

1. contentWindow

contentWindow是iframe元素的一个只读属性，返回一个Window对象来表示一个内嵌的HTML文档。由此我们可以通过contentWindow对象来访问iframe中的内容，如下所示：

```

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

var iframeWindow = iframe.contentWindow;

console.log(iframeWindow);

```

需要注意的是，当iframe内部加载的内容跨域时，跨域的两个Window对象之间有一定的安全限制，因此仅在同源情况下可以使用contentWindow属性进行访问。

2. contentDocument

contentDocument是iframe元素的一个只读属性，返回包含在iframe中的文档的文档对象。通过这个属性，我们可以直接对iframe中的文档对象进行访问，如下所示：

```

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

var iframeDocument = iframe.contentDocument;

console.log(iframeDocument);

```

同样需要注意的是，当iframe内部加载的内容跨域时，跨域的文档对象之间有一定的安全限制，因此仅在同源情况下可以使用contentDocument属性进行访问。

需要注意的是，如果使用XHTML格式的文档，则需要使用contentWindow.document或contentDocument.documentElement来访问文档的根元素，如下所示：

```

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

var iframeDocument = iframe.contentDocument;

console.log(iframeDocument.documentElement);

```

二、iframe的访问

当我们需要在页面中嵌入其他网页时，常使用iframe来进行实现。除了上述的contentWindow和contentDocument属性外，我们还可以通过其他方式来对iframe进行访问。

1. 通过iframe元素本身

直接通过iframe元素来进行访问是一种常用的方式，代码如下所示：

```

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

console.log(iframe);

```

通过这种方式我们可以获取到iframe元素本身，并对其进行一系列的操作。

2. 通过window.frames

window.frames是Window对象的一个属性，用于获取当前窗口中所有框架的数组。我们可以通过遍历这个数组来获取到我们想要的那个iframe对象，代码如下所示：

```

var iframes = window.frames;

for (var i = 0; i < iframes.length; i++) {

console.log(iframes[i]);

}

```

需要注意的是，window.frames中的框架对象都是Window对象，因此我们需要使用contentWindow或contentDocument属性来获取iframe中的内容。

3. 通过document.getElementsByTagName

我们还可以通过document.getElementsByTagName来获取到文档中所有的iframe元素，然后根据需要进行访问，代码如下所示：

```

var iframes = document.getElementsByTagName("iframe");

for (var i = 0; i < iframes.length; i++) {

console.log(iframes[i]);

}

```

同样需要注意的是，获取到的iframe元素需要使用contentWindow或contentDocument属性来获取其中的内容。

三、案例说明

使用Iframe来加载其他网页是一种常见的技术，比如我们可以在自己的网页中嵌入其他网站的页面，或者使用Iframe来进行跨域通信等等。下面我们来举几个例子来说明Iframe的使用方法。

1. 加载其他网站的页面

假设我们需要在我们的网页中嵌入百度首页，代码如下所示：

```

```

这个例子中，我们使用了一个Iframe来加载百度的首页。需要注意的是，由于百度是跨域网站，因此我们只能获取到Iframe的内容，而不能在Iframe中对百度网页进行操作。

2. 父子页面之间的通信

假设我们有一个父页面和一个子页面，需要在这两个页面之间进行通信，代码如下所示：

```

// 子页面中的JS代码

var button = document.getElementById("myButton");

button.onclick = function() {

parent.postMessage("Hello, parent!", "http://www.example.com");

}

// 父页面中的JS代码

window.onmessage = function(event) {

if (event.origin == "http://www.example.com") {

console.log("Message from child: " + event.data);

}

}

```

在这个例子中，我们在子页面中定义了一个按钮，并在点击按钮时向父页面发送了一个消息。父页面在收到子页面的消息后进行了输出。

需要注意的是，在这个例子中我们需要指定跨域通信的目标地址，示例中的目标地址为http://www.example.com。

3. 加载本地页面

假设我们需要在我们的网页中嵌入本地的一个HTML页面，代码如下所示：

```

```

这个例子中，我们使用了一个Iframe来加载我们本地的一个HTML页面。当然，在使用这种方式时，我们需要注意路径的设置以及跨域访问的安全限制等问题。

总结

通过上述的介绍和案例，我们可以看到Iframe在Web开发中具有广泛的应用。无论是用于加载其他网站的页面，还是用于实现父子页面之间的通信，Iframe都是一个非常实用的工具。然而，在使用Iframe时，我们需要注意安全问题以及跨域问题等，才能保证我们的Web应用程序的稳定运行和安全性。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/