檢測iframe內容高度變化

有大量的例子顯示如何動態設置一個iframe的高度的內容。這對我來說很完美。我現在遇到的問題是，內容可以在不觸發onload（認爲隱藏/可展開div s）的情況下更改大小。檢測iframe內容高度變化

有什麼方法可以檢測iframe內容的大小何時發生變化？這是在相同的域名，並沒有jQuery，請。

2010-12-22 Nelson Rothermel

我會通過使用setInterval定期輪詢（可能每200毫秒，也許更頻繁）來做到這一點。然後，您可以將內容的大小與上次的內容進行比較。

var iframe = document.getElementById('myIframe'), 
    lastheight; 

setInterval(function(){ 
    if (iframe.document.body.scrollheight != lastheight) { 
     // adjust the iframe's size 

     lastheight = iframe.document.body.scrollheight; 
    } 
}, 200);

來源

2010-12-22 20:17:22 lonesomeday

我曾考慮過這個，但後來我讀了https://developer.mozilla.org/en/DOM/Detecting_document_width_and_height_changes：`雖然您可以輪詢document.scrollWidth和document.scrollHeight的值以監視文檔的更改大小，閱讀這些屬性可以觸發文檔重排，這可以使它們在計算上很昂貴。「無論如何，我會試一試。 – 2010-12-22 21:23:29

@Nelson有趣，不知道。我不知道它是否適用（它指的是`document.scrollheight`而不是一個元素的滾動高度，但它可能是應該留意的事情。你總是可以減少輪詢頻率... – lonesomeday 2010-12-22 21:28:27

對於非webkit瀏覽器，有幾個domMutation-Events，當元素的屬性（例如body元素）發生更改時會觸發。請參閱DOMSubtreeModified，更重要的是DOMAttrModified。

即使在非Windows元素上，Internet Explorer也會觸發onresize事件。

歌劇院榮譽domMutation事件。

另一方面，Webkit會放棄這些事件，從而影響渲染速度和JavaScript性能。除了通過超時/間隔來檢查元素的有效大小外，沒有別的辦法。

來源

2010-12-22 20:18:17 kstrieder

檢測iframe內容高度變化

回答

相關問題