同域jQuery（跨）iframe操作DOM

本文主要是介绍同域jQuery（跨）iframe操作DOM，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

frame目前还是比较流行的，许多地方都通过它来实现特殊的情况。比如说传统的上传、select在ie6下、代理、跨域等等。今天呢，简要的记述一下跨iframe的相关操作，主要是用jQuery操作DOM结构方面。

[javascript]  view plain copy  
 <iframe src="a.php" id="aa"></iframe>   
 <iframe src="b.php" id="bb"></iframe>   
 <input type="button" id="read-aa" value="读取iframe #aa">   
 <input type="button" id="write-aa" value="写入iframe #aa">  

[javascript]  view plain copy  
 $('#read-aa').click(function()   
 {   
     var v=$('#aa').contents().find('body').html();   
     alert(v);   
 });   
 $('#write-aa').click(function()   
 {   
     
     $('#aa').contents().find('div').append('<hr>这是index.php操作aa.php写入的内容');   
 });  

主要方法是 contents()，读取iframe。

2、iframe跨父框架操作iframe

[javascript]  view plain copy  
 <!DOCTYPE html>   
 <meta charset="utf-8">   
 <title>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</title>   
 <script src="public/jQuery.js"></script>   
 <script>   
 $(function()   
 {   
     $('#read-parent-aa').click(function()   
     {   
         var v=$('body',parent.document).find('#aa').contents().find('body').html();   
         alert(v);   
     });   
     $('#write-parent-aa').click(function()   
     {   
         $('body',parent.document).find('#aa').contents().find('div').append('<hr>这是bb.php操作aa.php写入的内容');   
     });   
 });   
 </script>   
 <div>   
 这是iframe #bb里的内容   
 </div>   
 <input type="button" id="read-parent-aa" value="跨父读取iframe #aa">   
 <input type="button" id="write-parent-aa" value="跨父写入iframe #aa">  

HTML：代码

[javascript]  view plain copy  
 <!DOCTYPE html>  
 <meta charset="utf-8">  
 <title>jQuery操作iframe</title>  
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
 <iframe src="a.php" id="aa"></iframe>  
 <iframe src="b.php" id="bb"></iframe>  
 <input type="button" id="read-aa" value="读取iframe #aa">  
 <input type="button" id="write-aa" value="写入iframe #aa">  
 <script>   
 $(function()  
 {  
     $('#read-aa').click(function()  
     {  
         var v=$('#aa').contents().find('body').html();  
         alert(v);  
     });  
     $('#write-aa').click(function()  
     {  
           
         $('#aa').contents().find('div').append('<hr>这是index.php操作aa.php写入的内容');  
     });  
 });  
 </script>  