Div內嵌iframe及自適應實現
阿新 • • 發佈：2019-02-11
今天在逛網頁時，看見一個div內嵌iframe的設計，父文件的大小是隨著內嵌frame的變化而自適應的。，這才意識到以前對frame的接觸太少了，看見這個都大驚小怪的。於是今天就給自己留了個小作業，寫一寫高寬度自適應。
程式碼如下。
要特別注意的有，獲取子html frame的contentDocument等同於contentWindow.getDocument.
2.chrome裡面是會報錯的，該段程式碼。解決方案有兩個，要麼在Firefox裡面測試，要麼把本段程式碼放進伺服器上。錯誤
原因很簡單，跨頁面的安全問題。
<!DOCTYPE html> <html> <head> <title>div巢狀iframe自適應</title> <meta charset="utf-8"> </head> <body> <div> <iframe src="localStorage.html" id="ifr"></iframe> </div> <script type="text/javascript"> function calHeight(doc) { var cHeight=Math.max(doc.body.clientHeight,doc.documentElement.clientHeight);//documentElement返回文件的根元素 var sHeight=Math.max(doc.body.scrollHeight,doc.documentElement.scrollHeight); var finalHeight=Math.max(sHeight,cHeight); return finalHeight; } function calWidth(doc){ var cWidth=Math.max(doc.body.clientWidth,doc.documentElement.clientWidth); var sWidth=Math.max(doc.body.scrollWidth,doc.documentElement.scrollWidth); var width=Math.max(cWidth,sWidth); return width; } //1. 取iframe內的文件物件，標準瀏覽器使用contentDocument屬性，IE低版本(IE6,7,8)使用document屬性。 //2. calcPageHeight函式計算頁面的實際高度，標準瀏覽器使用document.documentElement，低版本IE使用document.body，預設取clientHeight，出現滾動條的取scrollHeight，最後取兩個值中最大的。 var ifr=document.getElementById('ifr'); ifr.onload=function(){ var iDoc=ifr.contentDocument;//此時報錯無法獲取子類文件 var height=calHeight(iDoc); var width=calWidth(iDoc); ifr.style.height=height+'px'; ifr.style.width=width+'px'; } </script> </body> </html>