說明: 本範例 將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
