如何实现iframe自适应高度？- iframe自适应高度详解

在网页开发中，我们经常会利用iframe标签来嵌入其他网页或者外部资本，但是iframe的高度是固定的，若是嵌入的内容高度发作变革，就会呈现滚动条或者留白的情况。因而，实现iframe自适应高度就成为了一个问题。

1. 利用iframe-resizer插件

iframe-resizer是一个轻量级的插件，能够让iframe自适应高度。利用办法十分简单，只需要在页面中引入插件的js文件，并在iframe标签上添加data-iframe-height属性即可。插件会主动检测iframe中内容的高度，并将iframe的高度设置为响应的值。

2. 利用原生JavaScript

若是你不想利用插件，也能够利用原生JavaScript实现iframe自适应高度。详细办法是在iframe中嵌入一个脚本，在脚本中获取iframe内部文档的高度并将其赋值给iframe的高度。代码如下：

```

function autoResize(i) {

var iframeHeight = i.contentWindow.document.body.scrollHeight;

i.height = iframeHeight + "px";

}

3. 利用jQuery

若是你的项目中已经利用了jQuery，那么能够利用jQuery来实现iframe自适应高度。代码如下：

$(document).ready(function() {

$('iframe').load(function() {

$(this).height($(this).contents().height());

});

});

1. 若是iframe嵌入的内容来自于其他域名，那么无法获取其高度，因为同源战略的限造。

2. 若是iframe中嵌入的内容包罗图片或者其他异步加载的资本，那么需要期待那些资本加载完成后再获取其高度，不然可能会呈现高度不准确的情况。

iframe自适应高度是一个常见的需求，在实现过程中能够利用插件、原生JavaScript或者jQuery来实现。需要留意的是，同源战略和异步加载的资本可能会对高度计算产生影响。