總體思路是這樣的，因為iframe里頁面的內容是動態加載的，而且電腦屏幕寬度發生變化時，也得相應的去改變iframe標簽的高度（如果高度確定就不用這么麻煩了）；
首先，我們在父頁面中定義一個方法，用來改變iframe標簽的高度；在iframe中的頁面中，當內容加載號之后去調用父頁面匯總的這個方法（因為要根據內容自適應高度）；
然后再處理，當屏幕發生改變時，在子頁面匯總調用父頁面匯總的這個方法；
父頁面代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> </style> </head> <body> <div>sdsd</div> <iframe src="./bb.html" scrolling="no" frameborder="0" id="test" style="width:100%;"></iframe> <script> function setIframeHeight(id){ var iframe = document.getElementById(id); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.min(bHeight, dHeight); iframe.height = height+20; }catch (ex){} } </script> </body> </html>
子頁面中的代碼：這里用一個定時器去模仿異步加載數據所產生的時間差
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> 我是內斂元素時 <div id="test"></div> <script>
//模擬頁面加載來的頁面內容 var html=`<p>達所大所佛擋殺佛大薩達所大所佛擋殺佛大薩達所大所佛擋殺佛大薩達所大所佛擋殺佛大薩達所大所佛擋殺佛大薩達所</p>`; var win=window; var doc=document; function ready(){ document.querySelector("#test").innerHTML=html;//動態添加頁面內容 parent.window.setIframeHeight("test");//調用父頁面中改變 iframe標簽高度的方法 } setTimeout(ready,1000); var processor={ timeoutId:null, performProcessing:function(){ //實際執行的代碼 parent.window.setIframeHeight("test") }, process:function(){//函數節流 clearTimeout(this.timeoutId); var that=this; this.timeoutId=setTimeout(function(){ that.performProcessing(); },100); } } //使用 當窗口發生改變時調用 window.onresize=function(){ processor.process(); } </script> </body> </html>
這里面用到了 函數節流 iframe中調用父頁面方法的知識點