☉目標:如果現在有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>




b.html中的HTML:

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




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

$('#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();
});

arrow
arrow

    倧齊 發表在 痞客邦 留言(0) 人氣()