项目中通过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. css-inline-block和float的布局二者择其一？

    几个月前,带着不甘和忐忑毅然决然的在亚马逊离职了,当时不知道对我来说是好是坏,现在看来,当初的选择还是蛮不错的.感觉在亚马逊的几个月貌似接触最多的就是wiki和tt了,怀着对技术热忱离开,拒绝了腾讯, ...

  2. hdu 1278 逃离迷宫

    逃离迷宫 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  3. Linux设置history命令显示时间

    效果如图: 设置方法如下: vim /etc/bashrc #command-->history set HISTFILESIZE=2000 #保存命令的总数默认总数为1000 HISTSIZE ...

  4. 1011 World Cup Betting （20 分）

    1011 World Cup Betting (20 分) With the 2010 FIFA World Cup running, football fans the world over wer ...

  5. sklearn中的metrics模块中的Classification metrics

    metrics是sklearn用来做模型评估的重要模块,提供了各种评估度量,现在自己整理如下: 一.通用的用法:Common cases: predefined values 1.1 sklearn官 ...

  6. g++多文件编译

    头文件:A.h void test(); 源文件:A.cpp #include <iostream> #include<thread> #include<chrono&g ...

  7. 给iOS开发新手送点福利,简述UIImagePickerController的属性和用法

    1.+(BOOL)isSourceTypeAvailable:(UIImagePickerControllerSourceType)sourceType;         // 检查指定源是否在设备上 ...

  8. Helm 入门安装指南

    Helm 是 Kubernetes 生态系统中的一个软件包管理工具.本文将介绍 Helm 中的相关概念和基本工作原理,并通过一个具体的示例学习如何使用 Helm 打包.分发.安装.升级及回退 Kube ...

  9. 〈Android 群英传－神兵利器〉第7章一个的寂寞与一群人的狂欢

    |---第7章一个的寂寞与一群人的狂欢 |---7.1如何解决问题 |---Chrome浏览器 |---Chrome开发者工具 |---Chrome插件(Json-Handle:Json格式化查看工具 ...

  10. drop解决过拟合的情况

    用到的训练数据集:sklearn数据集 可视化工具:tensorboard,这儿记录了loss值(预测值与真实值的差值),通过loss值可以判断训练的结果与真实数据是否吻合 过拟合:训练过程中为了追求 ...