說明：
本範例
將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
其它文章
沒有留言:
張貼留言