项目中通过iframe内嵌了一个子页面，子页面定义了一些全局变量，父页面需要获取子页面的全局变量，做了一些测试（我的环境IE10和Firefox32.0.3），得出如下结论：

IE下： window.frames['iPage'].变量名
  火狐下：window.frames['iPage'].contentWindow.变量名
  IE&火狐下：document.getElementById('iPage').contentWindow.变量名

具体原因没有深究，今天在调试一个iframe例子的时候发现了问题所在(iframe没有定义name属性)，下面做了一个实例

父页面 parent.html

  1. <html>
  2. <script>
  3. function test(){
  4. var obj1=document.getElementById("myframe");//获得对应iframe的HTMLIFrameElement对象，可以获取iframe相关属性
  5. alert(obj1.src);
  6. /*情况一：iframe定义了name="myframe"的情况 IE和火狐兼容*/
  7. var obj2=window.frames["myframe"];//获得对应iframe的window对象
  8. alert(obj2.company);
  9. alert(obj2.document.myform.username.value);
  10. alert(obj1.contentWindow==obj2);//true,可见document.getElementById("myframe").contentWindow与document.frames["myframe"]都是指向iframe对应的window对象
  11. alert(obj1.contentWindow.document.myform.username.value);
  12. /*情况二：iframe没有定义name="myframe"的情况，情况如同文章最开始所描述
  13. var obj2=window.frames["myframe"];//获得对应iframe的window对象
  14. alert(obj2.company);//IE下正确，火狐下错误
  15. alert(obj2.contentWindow.company);//IE下错误，火狐下正确
  16. alert(obj2.contentWindow.document.myform.username.value);//IE下错误，火狐下正确
  17. alert(obj1==obj2);//true,可见document.getElementById("myframe")与document.frames["myframe"]都是指向iframe对应的HTMLIFrameElement对象
  18. */
  19. }
  20. </script>
  21. <body onload="test()">
  22. <iframe id="myframe" name="myframe" src="child.html" frameborder="3" style="width:300;height:200;border-width:1;border-color:red;border-style:solid"></iframe>
  23. </body>
  24. </html>

子页面 child.html

  1. <html>
  2. <script>
  3. var company="cppei";
  4. </script>
  5. <body>
  6. <form name="myform">
  7. 用户名：<input type="text" name="username" value="test" />
  8. </form>
  9. </body>
  10. </html>

最后得出的结论是：要在父页面访问iframe内子页面的全局变量，

1、在iframe 定义了name属性的情况下
  IE&火狐下： window.frames['iPage'].变量名
  IE&火狐下：document.getElementById('iPage').contentWindow.变量名

因为此时 window.frames['iPage']==document.getElementById('iPage').contentWindow

2、在iframe 没有定义name属性的情况下

IE下： window.frames['iPage'].变量名
  火狐下：window.frames['iPage'].contentWindow.变量名
  IE&火狐下：document.getElementById('iPage').contentWindow.变量名

因为此时火狐下window.frames['iPage']==document.getElementById('iPage')，所以要加上contentWindow来访问变量

所以定义iframe时还是最好加上name属性

////

query取得iframe中元素的几种方法

在iframe子页面获取父页面元素
代码如下:

$('#objId', parent.document);
// 搞定...

在父页面 获取iframe子页面的元素
代码如下:

$("#objid",document.frames('iframename').document)

$(document.getElementById('iframeId').contentWindow.document.body).html()
 
 显示iframe中body元素的内容。

$("#testId", document.frames("iframename").document).html();

根据iframename取得其中ID为"testId"元素

$(window.frames["iframeName"].document).find("#testId").html()

用JS或jQuery访问页面内的iframe,兼容IE/FF 
注意:框架内的页面是不能跨域的!

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

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

XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>页面首页</title>  
</head>  
  
<body>  
<iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>  
</body>  
</html>   
iframe.html 内容:

XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>iframe.html</title>  
</head>  
  
<body>  
<div id="test">www.koyoz.com</div>  
</body>  
</html>

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

JavaScript代码
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代码
$("#koyoz").contents().find("#test").css('color','red');   
此代码的效果和JS直接访问是一样的,由于借助于jQuery框架,代码就更短了.

收集网上的一些示例：
用jQuery在IFRAME里取得父窗口的某个元素的值
只好用DOM方法与jquery方法结合的方式实现了

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

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

父窗口想获得IFrame中的Iframe，就再加一个frames子级就行了，如：
$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");

////

原文链接：http://blog.csdn.net/cuihaiyang/article/details/40587075

Js获取iframe子页面全局变量的更多相关文章

  1. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  2. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...

  3. 获取iframe子页面内容高度给iframe动态设置高度

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...

  4. iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素

    一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...

  5. 获取iframe子页面节点，响应浏览器宽高

    获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" ...

  6. 如何实现跨域获取iframe子页面动态的url

    有的时候iframe的子页面会动态的切换页面,我们在父页面通过iframe1.contentWindow.window.location只能获取同源的子页面的信息.获取跨域的子页面信息会报错. 这时可 ...

  7. js之iframe子页面与父页面通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  8. JS中iframe子页面与父页面之间通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  9. Js动态获取iframe子页面的高度总结

    问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置 ...

随机推荐

  1. 2017头条笔试题：二维点集中找出右上角没有点的点并按x坐标从小到大打印坐标

    PS:这篇是之前本来就想发的但是一直没时间写,加上今天做了京东的题,结果代码名就命名为jingdong了……懒得改代码名重新跑一遍结果了=.= 暴力法去做就是遍历每个点,判断它是不是“最大点”.判断过 ...

  2. IIS6与IIS7在编程实现HTTPS绑定时的细微差别

    本文章其实最主要信息是: 问题出在那个小小的*号上——IIS6中不支持通配符,第一部分为空时表示(All Unsigned),而IIS7中同时支持空或通配符的写法,如果为空则自动转为*:443:,我们 ...

  3. python2.7中出现TypeError: must be type, not classobj

    class Person: def __init__(self,name,age): self._name = name self._age = age class Student(Person): ...

  4. AspectJ入门

    AOP的实现方式有两种: AOP框架在编译阶段,就对目标类进行修改,得到的class文件已经是被修改过的.生成静态的AOP代理类(生成*.class文件已经被改掉了,需要使用特定的编译器).以Aspe ...

  5. 使用shell/bat脚本调试java程序示例

    一.linux下shell启动java #!/bin/sh JAVA_HOME=/usr/lib/jvm/java-1.6.0-openjdk-1.6.0.0.x86_64/jre # JVM_OPT ...

  6. ROS-RouterOS hAP ac2+usb 4G上网卡+小米新推的无线上网卡是绝配

    月租9元.每日缴1元.上网不限量 Model Tested RouterOS version Format Passthrough support TechnologiesZTE MF823 v6.8 ...

  7. mysql互为主从

    摘自:http://flash520.blog.163.com/blog/static/3441447520101029114016823/ A B 为两台MySQL服务器,均开启二进制日志,数据库版 ...

  8. Linux下apache2及模块mod_deflate等安装和配置

    安装apache 1.wget http://archive.apache.org/dist/httpd/httpd-2.2.13.tar.gz 2.在安装目录 先让大家看看实际效果,请看下图10点中 ...

  9. matlab下将图片序列转化为视频文件 && 将为视频文件转化图片序列

    将图片序列转化为视频文件 程序如下: framesPath = 'E:\img\';%图像序列所在路径,同时要保证图像大小相同 videoName = 'Bolt.avi';%表示将要创建的视频文件的 ...

  10. 清理mysql binlog日志

    1.查看binlog日志 mysql> show binary logs; +------------------+------------+| Log_name         | File_ ...