JS實作iframe自適應高度的方法(相容IE與FireFox)

本文實例講述了JS實作iframe自適應高度的方法。分享給大家參考，具體如下：

之前一直被iframe自適應高度的問題困擾，很多JS程式碼在FF裡面似乎就變成啞巴了。後來下面這段程式碼終於被我從萬千號稱相容FF的程式碼堆中翻了出來。我已經用過了，真的好用。尤其是對於我這樣的JS水平較低（真不好意思）的人來說，這段程式碼簡單易懂，方便修改，只要把下面的程式碼複製貼上到iframe所在頁面的

標籤裡面，並且修改一下ID名就行了（注意，要修改的地方有兩個，位置在程式碼中有說明）。

向原創這段程式碼的朋友致敬。

步驟1：在

標籤下先輸入如下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：子頁面加入以下內容

<iframe id="iframe1"onload="adjustFrameSize()" scrolling="no" src="iframe1.html"width="100%" height="300px" target="_self"frameborder="0"></iframe>

   

1：子頁面加入以下內容

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

   

的部分呼叫此方法

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程式設計有所幫助。

更多JS實作iframe自適應高度的方法(相容IE與FireFox)相關文章請關注PHP中文網！