Monday, April 8, 2013

[JS] 依 iframe 內容動態調整高度

Dynamically adjust iFrame height

在公司的網站上發現了一個 js 的小 bug,這個頁面內鑲了 iframe ,但是因為 iframe 內的資料來源不一,所以頁面長度也必須跟著調整,原本的寫法是每兩秒去檢查iframe高度然後調整,但是在某些瀏覽器上會有問題,我後來想了一下,決定改成去抓iframe load event來調整高度,試過之後,code更簡潔,效果看來也更好,跨瀏覽器測試目前也沒問題,所以就先改成這樣用了,如果未來有問題再來調整。

code大致如下
document.getElementById('myframe').onload = function() {
        var ih = document.getElementById('myframe').contentWindow.document.body.scrollHeight;
        $('#myframe').css('height', (ih+50) + "px");
    };

myframe就是那個 iframe 的名稱,我是多加了50px以求美觀,要怎麼運用可以再看個人需求去修改了。

____Update____

結果我很快又回來了,前面那份code因為只會在iframe第一次載入完成時才做動,所以若iframe裡面點連結然後高度改變,就沒辦法再次更新高度,於是我又研究了一下,找出這個改法,將resize事件註冊進每次iframe更新後做動,這樣應該就可以解掉大部分可預見的狀況了,然後也順便改成不需要jquery就可以跑。
var iframe = document.getElementById('myframe');
    function resize() {
        var ih = iframe.contentWindow.document.body.offsetHeight;
  iframe.style.height = (ih +30) +"px";
    }
    
    if (iframe.attachEvent) iframe.attachEvent('onload', resize);
    else iframe.addEventListener('load', resize, false);

因為偷懶我只在chrome , firefox , opera , ie10 上測過,我想大致應該是沒問題了。

9 comments:

  1. 大大~

    code 有筆誤哦~

    第一支的
    var ih = document.getElementById('innerframe').contentWindow.document.body.scrollHeight;

    getElementById('innerframe')應該是getElementById('myframe')

    第二支的
    rame.style.height = (ih +30) +"px";
    應該是
    iframe.style.height = (ih +30) +"px";

    ReplyDelete
    Replies
    1. @Wayne:
      感謝,第一段code沒改到的地方我更正了
      第二段看起來是沒問題,可能是你複製的時候漏了

      anyway,還是感謝你提醒

      Delete
  2. 請問是否有碰過iframe內頁面有updatePanel的狀況?我測試將調整irframe長寬功能寫在onload後仍無法偵測updatePanel更新的狀況。

    ReplyDelete
    Replies
    1. 我想是updatePanel不會去觸發onload動作,你可以試著在updatePanel更新後去執行一段JS呼叫ParentPage的resize事件
      或是直接在包iframe那頁就寫個每幾秒重設高度的事件(雖然這比較笨XD)

      Delete
  3. 喔~了解! 感謝大大的回覆~!

    ReplyDelete
  4. 請問一下,我有A網頁B網頁都使用同一個連結選單,但是A網頁B網頁各是A_iframe與B_iframe;
    iframe載入內容分別為A_page和B_page,連結選單中想要在A網頁點選到選單中關於B網頁的內容 並載入指定B_page,我該如何下連結語法?

    ReplyDelete
    Replies
    1. 直接在A_iframe裡面的iframe src設成B_page不行嗎 ?

      Delete
  5. 這方式跨域名的iframe內嵌就會失敗喔

    ReplyDelete
    Replies
    1. 當初是為了同站內嵌去做的,所以沒遇到跨domain的問題XD

      Delete