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 上測過,我想大致應該是沒問題了。

12 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
  6. Abreviatura de Monestier-de-Clermont,moncler jacket venta para hombre una ciudad alpina cerca de Grenoble, comprar chaqueta monclerFrancia, Moncler fue fundada en 1952 por René Ramillon como una empresa de equipo para actividades al aire libre, produciendo sacos de dormir, tiendas de campaña y otras necesidades para escalar montañas. Hoy en día, la etiqueta franco-italiana es mejor conocida por sus chaquetas acolchadas ligeras y súper cálidas, así como por sus accesorios listos para usar y lo suficientemente resistentes como para soportar el duro clima invernal.

    ReplyDelete
  7. Paris Fashion Week would Replica handbags uk have been incomplete without replica Yves Saint Laurent bags Anthony Vaccarello’s homage to maison founder Yves Saint Laurent in the Saint Laurent spring/summer 2019 collection.

    ReplyDelete
  8. replica mont blanc uk is a brand with a long history. Founded in 1906, the replica mont blanc donation penscompany is named after one of the highest mountains in Europe, marking the brand's commitment to producing fine writing instruments. Using the brand that produces the best writing instruments, it helps to know how to find the Montblanc fountain pen that works best for you. From the best Montblanc fountain pens to ballpoint and ballpoint pens, you have a choice. Whether you are a collector or a keen writer, this article will take you to the top 10 Montblanc fountain pens on the market.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...