用JS或jQuery访问页面内的iframe,兼容IE/FF

js或者jQuery访问页面中的框架也就是iframe.

注意:框架内的页面是不能跨域的!


假设有两个页面,在相同域下.

index.html 文件内含有一个iframe:

XML/HTML代码
  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.   
  8. <body>  
  9. <iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>  
  10. </body>  
  11. </html>  

iframe.html 内容:

XML/HTML代码
  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>iframe.html</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <div id="test">www.koyoz.com</div>  
  10. </body>  
  11. </html>  

 

1. 在index.html执行JS直接访问:

JavaScript代码
  1. document.getElementById('koyoz').contentWindow.document.getElementById('test').style.color='red'  

通过在index.html访问ID名为'koyoz'的iframe页面,并取得此iframe页面内的ID为'test'的对象,并将其颜色设置为红色.

此代码已经测试通过,能支持IE/firefox .

2. 在index.html里面借助jQuery访问:

JavaScript代码
  1. $("#koyoz").contents().find("#test").css('color','red');  

此代码的效果和JS直接访问是一样的,由于借助于jQuery框架,代码就更短了.

 

补充一下：

用DOM方法与jquery方法结合的方式实现了

1.在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

2.在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");

iframe框架的：<iframe src="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

IE7中测试通过