JavaScript访问同一个页面中的不同iframe的内容！

比较大一点的WEB项目一般页面都会用到iframe，这样如何访问各个iframe的内容就显得比较重要，比如登陆页放在一个iframe中，而登陆状态显示页又放在同一个页面的另一个iframe中，那样的话在登陆的时候就得刷新另一个iframe中的登陆状态显示页，经本人一晚上GOOGLE+亲测，得如下代码，可通过javascript来访问或刷新同一个页面中不同iframe中的内容。
    本样例共3个测试文件：index.html, ye1.html, ye2.html   各个文件源码如下：
index.html:
源代码复制(IE有效)打印关于
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>JS框架测试</title>  
  6. </head>  
  7. <script language="javascript" type="text/javascript">  
  8. function fun()   
  9. {   
  10.     window.frames["ye1"].document.getElementById("con1").innerHTML = "aaa";  // 设置子窗体中的内容   
  11. //  window.frames["ye1"].location.reload();    // 刷新子窗体   
  12. }   
  13. </script>  
  14. <body>  
  15. <p>  
  16. <iframe src="ye1.html" name="ye1" width="200" height="120" scrolling="auto"></iframe>  
  17. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<iframe src="ye2.html" name="ye2" width="300" height="120" scrolling="auto"></iframe>  
  18. </p>  
  19. <p>  
  20.   <input type="button" name="Submit" value="改变frm1的内容" onclick="fun()" />  
  21. </p>  
  22. <div id="main"></div>  
  23. </body>  
  24. </html>  

ye1.html:
源代码复制(IE有效)打印关于
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>页面一</title>  
  6. <script>  
  7.     var i = Math.random();   
  8.     document.write(i);   
  9. </script>  
  10. </head>  
  11.   
  12. <body>  
  13. <p>页面一</p>  
  14. <div id="con1"></div>  
  15. </body>  
  16. </html>  

ye1里加上一段javascript是为了方便在测试刷新的时候能看到效果，即每回刷新都随机生成一个数.
ye2.html
源代码复制(IE有效)打印关于
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>页面一</title>  
  6. </head>  
  7. <script language="javascript" type="text/javascript">  
  8. function fun()   
  9. {   
  10.     // window.parent.document.getElementById("main").innerHTML = "哎呀";   // 设置父窗体内的内容   
  11.     // window.parent.frames["ye1"].location.reload();   // 刷新父窗体中的另一個子窗體   
  12.     window.parent.frames["ye1"].document.getElementById("con1").innerHTML = "bbb";  // 设置父窗体中的另一个子窗体的内容   
  13. }   
  14. </script>  
  15. <body>  
  16. <p>页面二</p>  
  17. <p>  
  18.   <input type="button" name="Submit" value="改变页面内容"  onclick="fun()"/>  
  19. </p>  
  20. <div id="con2"></div>  
  21. </body>  
  22. </html>  

    运行index.html点击按钮即可看到效果，以上代码解决如下问题：
    ① 父窗体访问或刷新子窗体
    ② 子窗体访问或刷新父窗体
    ③ 同一个父窗体中的两个子窗体之间的相互访问或刷新
代码经测试在IE5.5, IE6, IE7, IE8 Beta 2, FireFox, Opera, Chrome浏览器上测试通过！
posted @ 2010-04-29 23:16  你妹的sb  阅读(678)  评论(0)  编辑  收藏  举报
百度一下