JS實現(xiàn)iframe自適應高度的方法(兼容IE與FireFox)

更新時間：2016年06月24日 09:50:29 作者：yiluoAK_47

這篇文章主要介紹了JS實現(xiàn)iframe自適應高度的方法,涉及javascript與iframe交互動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)iframe自適應高度的方法。分享給大家供大家參考，具體如下：

之前一直被iframe自適應高度的問題困擾，很多JS代碼在FF里面似乎就變成啞巴了。后來下面這段代碼終于被我從萬千號稱兼容FF的代碼堆中翻了出來。我已經(jīng)用過了，真的好用。尤其是對于我這樣的JS水平較低（真不好意思）的人來說，這段代碼簡單易懂，方便修改，只要把下面的代碼復制粘貼到iframe所在頁面的<body>標簽里面，并且修改一下ID名就行了（注意，要修改的地方有兩個，位置在代碼中有說明）。

向原創(chuàng)這段代碼的朋友致敬。

步驟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 id="iframe1"onload="adjustFrameSize()" scrolling="no" src="iframe1.html"width="100%" height="300px" target="_self"frameborder="0"></iframe>

這段代碼有一個小小的缺點，就是使用后iframe中的內(nèi)容和外邊框（如果存在外邊框的話）的距離有點小，可以自己適當調(diào)整一下；另外，除IE6.0以上版本和FF以外沒有測試過其它瀏覽器，除此之外尚未發(fā)現(xiàn)別的缺陷，如果在使用中發(fā)現(xiàn)了問題或者有更好解決方法的童鞋歡迎來分享一下。

如果在iframe頁面內(nèi)部含有ajax加載的頁面或者通過js動態(tài)去添加內(nèi)容導致iframe高度變化的情況，可以添加一下方式進行：

1：子頁面添加以下內(nèi)容

//修改父窗口地址
function changeHeight(){
window.top.location.hash = "#height=" + $(document).height();
}

修改dom的部分調(diào)用該方法

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();

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: