[jQuery]獲取 iframe內的DOM物件

☉目標：如果現在有a.html和b.html兩個網頁。b.html是以iframe的形式顯示在a.html中。我們要在a.html中，使用javascript取得b.html中的DOM元素。


a.html中的HTML：

<iframe id="iframepage" src="b.html" frameborder="0" ></iframe>

<iframe id="iframepage" src="b.html" frameborder="0" ></iframe>

b.html中的HTML：

<div id="iframeElement">test123</div>

<div id="iframeElement">test123</div>

☉方法說明：我們可以透過jQuery來找到iframe內的DOM元素，以上面為例子，透過下面方法，我們可以在a.html中找到b.html的網頁元素。

$('#iframepage').contents().find("#iframeElement");

$('#iframepage').contents().find("#iframeElement");

但是，如果你直接使用這行程式取得b.html的網頁元素，可能會發生有時正確，有時失敗的窘境，這是因為在a.html載入後你的javascript就已經開始執行了，但是a.html載入完畢，並不等於b.html也載入完畢，這是有時間差的。因此，在網頁中要存取iframe的DOM元素要先確定iframe中的DOM元素已經載入完成。你可以加上load事件來處理這件事：

$('#iframepage').load(function(){

    $('#iframepage').contents().find("#iframeElement").html();
});