2013-04-28 39 views
1

我找到自己的位置如下。我有一個jQuery插件,它需要嵌套在document.ready函數中。這個插件將一些樣式應用於頁面的元素。受此插件影響的元素之一包含一個iframe。此iframe不是來自我的網站。問題是document.ready沒有考慮iframe的內容,當它被加載時它的高度發生了變化,但是在此之前已經應用了jQuery插件,因此頁面佈局被搞砸了。使document.ready考慮到來自外部iframe的元素

我嘗試以下,以確保插件獲取的所謂只有當文件準備和iframe已準備就緒,以及:

$(document).ready(function() { 
    $('#frameId').ready(function() { 
    //plugin code 
    }); 
}); 

但是,這並不工作,我正在尋找另一種解決方案。

回答

1

只有文檔具有ready()事件,對於IFrame的它會爲onload:

$(document).ready(function() { 
    $('#frameId').on('load', function() { 
    //plugin code 
    }); 
}); 

但是,爲什麼你的插件需要訪問一個iFrame?

+0

如果iframe在另一個域上,那麼這個加載事件是否仍會觸發? – jmort253 2013-04-28 22:27:17

+0

@ jmort253 - 你爲什麼不試試? – 2013-04-28 22:28:31

+0

我並不需要訪問iframe,但我必須知道它的高度,以便插件能夠正常工作。 – Ilja 2013-04-28 22:29:34

0

的解決方案是$.holdReady();

$.holdReady(true); 
$(document).ready(function() { 
    //plugin code 
}); 

$('#frameId').on('load', function() { 
    $.holdReady(false); 
}); 

用於訪問跨域的iFrame內容的高度,你需要的postMessage的。看看這個post