iframe自适应高度（让iframe自适应高度的方法）-特纳普生活圈

2024-01-29T13:53:37

让iframe自适应高度的方法

最近在做一个网站的时候，需要嵌入一个第三方的内容，对于这种情况，我们通常会使用iframe来实现。但是，如果iframe的高度不能自适应，则可能会影响到我们整个页面的布局效果。接下来，本文将介绍几种让iframe自适应高度的方法，希望对大家有所帮助。

第一种方法：利用iframe内嵌网页的高度

我们可以通过JavaScript的方式获取iframe内嵌网页的高度，然后将iframe的高度设置为内嵌网页的高度，这样可以实现iframe自适应高度的效果。

具体实现方法如下：


variframe=document.getElementById('your-iframe-id');
varinnerDoc=iframe.contentDocument||iframe.contentWindow.document;
iframe.style.height=innerDoc.body.scrollHeight+'px';

上面的代码中，我们首先获取了iframe的DOM对象，然后使用contentDocument或contentWindow.document获取到iframe内嵌网页的DOM对象，接着将iframe的高度设置为内嵌网页的高度即可。

第二种方法：利用postMessage方法

postMessage是HTML5引入的一种通信机制，可以实现跨域通信。我们可以利用postMessage方法来让iframe向父页面传递自己的高度，从而实现自适应高度的效果。

具体实现方法如下：

在子页面中的JavaScript代码：


variframe=parent.document.getElementById('your-iframe-id');
iframe.postMessage(document.body.scrollHeight,'*');

在父页面中的JavaScript代码：


window.addEventListener('message',function(e){
variframe=document.getElementById('your-iframe-id');
if(e.data&&typeofe.data==='number'){
iframe.style.height=e.data+'px';
}
},false);

上面的代码中，我们首先获取了iframe的DOM对象，然后使用postMessage方法将子页面的高度传递给父页面。在父页面中，我们监听message事件，获取到子页面传递过来的高度，然后将iframe的高度设置为子页面的高度即可。

第三种方法：利用window.resize事件

我们可以在iframe内嵌网页中监听window.resize事件，然后将自身的高度发送给父页面，从而实现自适应高度的效果。

具体实现方法如下：

在子页面中的JavaScript代码：


window.addEventListener('resize',function(){
variframe=parent.document.getElementById('your-iframe-id');
iframe.contentWindow.postMessage(document.body.scrollHeight,'*');
});

在父页面中的JavaScript代码：


window.addEventListener('message',function(e){
variframe=document.getElementById('your-iframe-id');
if(e.data&&typeofe.data==='number'){
iframe.style.height=e.data+'px';
}
},false);

上面的代码中，我们在子页面中监听window.resize事件，获取到自身的高度，然后使用postMessage方法将高度传递给父页面。在父页面中，我们监听message事件，获取到子页面传递过来的高度，然后将iframe的高度设置为子页面的高度即可。

综上所述，以上是几种让iframe自适应高度的方法，大家可以根据自己的需求选择适合自己的方法来实现。希望对大家有所帮助。