Iframe高度自适应（兼容IEFirefox、同域跨域）
在實際的項目進行中，很多地方可能由于歷史原因不得不去使用iframe，包括目前正火熱的應用開發也是如此。
隨之而來的就是在實際使用iframe中，會遇到iframe高度的問題，由于被嵌套的頁面長度不固定而顯示出來的滾動條，不僅影響美觀，還會對用戶操作帶來不便。于是自動調整iframe的高度就成為本文的重點。
采用JavaScript來控制iframe元素的高度是iframe高度自適應的關鍵，同時由于JavaScript對不同域名下權限的控制，引發出同域、跨域兩種情況。
同域時Iframe高度自適應
下面的代碼兼容IE/Firefox瀏覽器，控制id為“iframeid”的iframe的高度，通過JavaScript取得被嵌套頁面最終高度，然后在主頁面進行設置來實現。
項目結構：
其中iframe.html和main.html在同一個域下
代碼如下，可復制。另外，請注意此解決方案僅供同域名下使用。
<!DOCTYPE html> <html> ???????? <head> ?????????????????? <meta charset="UTF-8"> ?????????????????? <title></title> ???????? </head> ???????? <body> ?????????????????? <script type="text/javascript"> ??????????????????????????? function SetCwinHeight() { ???????????????????????????????????? var iframeid = document.getElementById("iframeid"); //iframe id ???????????????????????????????????? if(document.getElementById) { ?????????????????????????????????????????????? if(iframeid && !window.opera) { ??????????????????????????????????????????????????????? if(iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) { ???????????????????????????????????????????????????????????????? iframeid.height = iframeid.contentDocument.body.offsetHeight; ??????????????????????????????????????????????????????? } else if(iframeid.Document && iframeid.Document.body.scrollHeight) { ???????????????????????????????????????????????????????????????? iframeid.height = iframeid.Document.body.scrollHeight; ??????????????????????????? ??????????????????????????? } ?????????????????????????????????????????????? } ???????????????????????????????????? } ??????????????????????????? } ?????????????????? </script> ?????????????????? <iframe width="100%" id="iframeid" οnlοad="Javascript:SetCwinHeight()" height="1" frameborder="0" src="iframe.html"></iframe> ???????? </body> </html> |
預覽效果如下：
跨域時Iframe高度自適應
在主頁面和被嵌套的iframe為不同域名的時候，就稍微麻煩一些，需要避開JavaScript的跨域限制。
原理：現有iframe主頁面main.html、被iframe嵌套頁面iframe.html、iframe中介頁面agent.html三個，通過main.html（http://127.0.0.1:8020/iframe3/main.html）嵌套iframe.html（域名為：http://127.0.0.1:8080/tpl/iframe.html，注意端口號），當用戶瀏覽時執行iframe.html中的JavaScript代碼設置iframeC的scr地址中加入iframe頁面的高度，agent.html（域名為：http://127.0.0.1:8020/iframe3/agent.html，注意的是它和main.html在同一個域下）取得傳遞的高度，通過JavaScript設置main.html中iframe的高度。最終實現預期的目標。
項目結構如下：
被嵌套的頁面在另外一個tomcat下：
iframe主頁面main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ???????? <title>iframe主頁面</title> ??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> ? <div style="border:1px solid #ccc;padding:10px;"> <iframe id="frame_content"? name="frame_content" src="http://127.0.0.1:8080/tpl/iframe.html" width="100%" height="0" scrolling="no" frameborder="0"></iframe> </div> <br/>測試一下<br/> ? </body> </html> |
代理頁面agent.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ???????? <title>代理頁面</title> ??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> ? <body> ? <script> function? pseth() { ??? var iObj = parent.parent.document.getElementById('frame_content'); ??? iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash; ??? iObj.style.height = iObjH.split("#")[1]+"px"; } pseth(); </script> ? </body> </html> |
?
被嵌套的頁面iframe.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ???????? <title>被iframe嵌套頁面</title> ??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> ? 文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> ? <iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe> ? <script type="text/javascript"> function sethash(){ ??? hashH = document.documentElement.scrollHeight; ??? urlC = "http://127.0.0.1:8020/iframe3/agent.html"; ??? document.getElementById("iframeC").src=urlC+"#"+hashH; } window.οnlοad=sethash; </script> ? </body> </html> |
最終預覽效果：
?
?
?
?
?
?
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的Iframe高度自适应（兼容IEFirefox、同域跨域）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第十八天：规划风险管理和识别风险
- 下一篇： 关于net::ERR_CONNECTIO