本文實(shí)例講述了JS實(shí)現(xiàn)iframe自適應(yīng)高度的方法。分享給大家供大家參考，具體如下：
之前一直被iframe自適應(yīng)高度的問(wèn)題困擾，很多JS代碼在FF里面似乎就變成啞巴了。后來(lái)下面這段代碼終于被我從萬(wàn)千號(hào)稱兼容FF的代碼堆中翻了出來(lái)。我已經(jīng)用過(guò)了，真的好用。尤其是對(duì)于我這樣的JS水平較低（真不好意思）的人來(lái)說(shuō)，這段代碼簡(jiǎn)單易懂，方便修改，只要把下面的代碼復(fù)制粘貼到iframe所在頁(yè)面的<body>標(biāo)簽里面，并且修改一下ID名就行了（注意，要修改的地方有兩個(gè)，位置在代碼中有說(shuō)明）。
向原創(chuàng)這段代碼的朋友致敬。
步驟1：在<body>標(biāo)簽下先輸入如下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";//初始化一下,否則會(huì)保留大頁(yè)面高度 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標(biāo)簽中加上id="iframe1"onload="adjustFrameSize()"
例如：
這段代碼有一個(gè)小小的缺點(diǎn)，就是使用后iframe中的內(nèi)容和外邊框（如果存在外邊框的話）的距離有點(diǎn)小，可以自己適當(dāng)調(diào)整一下；另外，除IE6.0以上版本和FF以外沒(méi)有測(cè)試過(guò)其它瀏覽器，除此之外尚未發(fā)現(xiàn)別的缺陷，如果在使用中發(fā)現(xiàn)了問(wèn)題或者有更好解決方法的童鞋歡迎來(lái)分享一下。
如果在iframe頁(yè)面內(nèi)部含有ajax加載的頁(yè)面或者通過(guò)js動(dòng)態(tài)去添加內(nèi)容導(dǎo)致iframe高度變化的情況，可以添加一下方式進(jìn)行：
1：子頁(yè)面添加以下內(nèi)容
//修改父窗口地址function changeHeight(){window.top.location.hash = "#height=" + $(document).height();}修改dom的部分調(diào)用該方法
2：父頁(yè)面添加
//高度自適應(yīng)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";//防止點(diǎn)擊其他頁(yè)面時(shí)高度不變 } setTimeout(iframeHeight, 100);}iframeHeight();更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
