說明:
本範例
將iframe 測試用的內容檔,div id 為main3 的內容修改。

語法 :  contents
主要取出iframe內容某個元素:
        $('#Iframe').contents().find('#main3')

修改某個元素的內容

$('#Iframe').contents().find('#main3').html(event.data.foo);

範例:
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery 取出iframe內的元素及修改iframe內的元素</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<style>
.active { color: #900;background-color: aqua;}
</style>
<script>
$(document).ready(function(){

function handler(event) {
$(this).after(event.data.foo);
$('#Iframe').contents().find('#main3').html(event.data.foo);
};
$('p').live('click',{foo:$("#testData").html()},handler);
});
</script>
</head>
<body>
<div id="testData"><span>iframe test div</span></div>
<iframe id="Iframe" src="http://localhost:8081/myWork/jqueryTest/jquerytest_iframe_data.html"></iframe>

<p>Click me!</p>
</body>
</html>

iframe 測試用的內容檔
jquerytest_iframe_data.html

<!DOCTYPE html>
<html>
<body>
<div id="main3">23</div>
<div id="main4">44</div>
</body>
</html>

結果

 

參考:
http://stackoverflow.com/questions/4602738/how-to-find-a-div-inside-of-an-iframe














 















其它文章

arrow
arrow
    文章標籤
    用法 jquery iframe find
    全站熱搜

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()