HTTPSHTTP

在网页开发中，经常会使用iframe标签来嵌入其他网页或者文档，以达到复用、分离等目的。由于iframe是一个独立的窗口，其高度和宽度需要动态获取才能保证其自适应性。本文将围绕这个话题，介绍如何使用jQuery获取iframe的高度和宽度。

一、获取iframe高度

获取iframe高度是比较常见的需求，因为在iframe中嵌入的内容可能会随着用户操作而发生变化，因此需要动态获取其高度以保证其正确显示。

1. 使用contentWindow属性

获取iframe高度的一种常见方法是使用iframe的contentWindow属性，该属性返回iframe所包含的文档的window对象。通过这个window对象，我们可以获取文档的高度。

```javascript var iframe = $('#myIframe')[0]; var height = iframe.contentWindow.document.body.scrollHeight; ```

上面的代码首先获取了id为myIframe的iframe元素，然后通过[0]获取到了原生的DOM对象，接着使用contentWindow属性获取到了其所包含的文档的window对象。通过document.body.scrollHeight获取到了文档的高度。

需要注意的是，由于同源策略的限制，如果iframe和父页面不在同一个域名下，使用contentWindow属性获取文档高度会报错。此时需要使用下面介绍的另一种方法。

2. 使用onload事件

如果iframe和父页面不在同一个域名下，我们可以使用iframe的onload事件来获取文档高度。这个事件会在iframe加载完毕后触发，此时我们可以获取文档的高度。

```javascript var iframe = $('#myIframe')[0]; iframe.onload = function() { var height = this.contentWindow.document.body.scrollHeight; console.log(height); } ```

上面的代码首先获取了id为myIframe的iframe元素，然后设置了其onload事件处理函数。当iframe加载完毕后，事件处理函数会被调用，此时我们可以通过this.contentWindow.document.body.scrollHeight获取到文档的高度。

二、获取iframe宽度

获取iframe宽度相对于获取高度来说比较简单，因为宽度通常不会因为用户操作而发生变化。我们可以直接通过iframe元素的width属性获取其宽度。

```javascript var iframe = $('#myIframe')[0]; var width = iframe.width; console.log(width); ```

上面的代码首先获取了id为myIframe的iframe元素，然后通过width属性获取到了其宽度。

三、总结

本文介绍了两种获取iframe高度的方法，分别是使用contentWindow属性和onload事件。需要注意的是，由于同源策略的限制，如果iframe和父页面不在同一个域名下，使用contentWindow属性获取文档高度会报错。此时需要使用onload事件。另外，获取iframe宽度相对于获取高度来说比较简单，直接通过iframe元素的width属性即可。