快捷導(dǎo)航

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

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

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

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

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

向原創(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ì)保留大頁面高度
   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()"

例如：

復(fù)制代碼代碼如下:

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

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

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

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

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

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

2：父頁面添加

//高度自適應(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)擊其他頁面時(shí)高度不變
  }
  setTimeout(iframeHeight, 100);
}
iframeHeight();

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

您可能感興趣的文章: