本文實例講述了JS實現iframe自適應高度的方法。分享給大家供大家參考，具體如下：
之前一直被iframe自適應高度的問題困擾，很多JS代碼在FF里面似乎就變成啞巴了。后來下面這段代碼終于被我從萬千號稱兼容FF的代碼堆中翻了出來。我已經用過了，真的好用。尤其是對于我這樣的JS水平較低（真不好意思）的人來說，這段代碼簡單易懂，方便修改，只要把下面的代碼復制粘貼到iframe所在頁面的<body>標簽里面，并且修改一下ID名就行了（注意，要修改的地方有兩個，位置在代碼中有說明）。
向原創這段代碼的朋友致敬。
步驟1：在<body>標簽下先輸入如下JS代碼
<scriptlanguage="javascript">function adjustFrameSize(){ var frm = document.getElementById("iframe1"); //將iframe1替換為你的ID名 var subWeb = document.frames ? document.frames["iframe1"].document : frm.contentDocument; if(frm != null && subWeb !=null) { frm.style.height="0px";//初始化一下,否則會保留大頁面高度 frm.style.height = subWeb.documentElement.scrollHeight+"px"; frm.style.width = subWeb.documentElement.scrollWidth+"px"; subWeb.body.style.overflowX="auto"; subWeb.body.style.overflowY="auto"; }}</script>步驟2：在iframe標簽中加上id="iframe1"onload="adjustFrameSize()"
例如：
這段代碼有一個小小的缺點，就是使用后iframe中的內容和外邊框（如果存在外邊框的話）的距離有點小，可以自己適當調整一下；另外，除IE6.0以上版本和FF以外沒有測試過其它瀏覽器，除此之外尚未發現別的缺陷，如果在使用中發現了問題或者有更好解決方法的童鞋歡迎來分享一下。
如果在iframe頁面內部含有ajax加載的頁面或者通過js動態去添加內容導致iframe高度變化的情況，可以添加一下方式進行：
1：子頁面添加以下內容
//修改父窗口地址function changeHeight(){window.top.location.hash = "#height=" + $(document).height();}修改dom的部分調用該方法
2：父頁面添加
//高度自適應var iframe = document.getElementById("iframe1");function iframeHeight() { var hash = window.location.hash.slice(1), h; if (hash && /height=/.test(hash)) { h = hash.replace("height=", ""); iframe.style.height = h+"px"; window.location.hash = "#temp";//防止點擊其他頁面時高度不變 } setTimeout(iframeHeight, 100);}iframeHeight();更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
