项目中通过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. java 复制对象 (克隆接口 与 序列化)

    关于java对象复制我们在编码过程经常会碰到将一个对象传递给另一个对象,java中对于基本型变量采用的是值传递,而对于对象比如bean传递时采用的是应用传递也就是地址传递,而很多时候对于对象传递我们也 ...

  2. War包反编译过程

    War包反编译过程 很多人可以将项目编译为war发布,可是有时候得到war确看不到源码.今天分享下war反编译的过程: 1.首先下载一个小工具,在http://jd.benow.ca/官网下载jd-g ...

  3. [转]批处理遍历文件夹生成 html 文件

    [转自] http://www.360doc.com/content/15/0205/20/21861372_446525665.shtml :: 自动将指定文件夹中的图片写入到 html 文件中 @ ...

  4. 上Google Adsense个人的一点体验

    最近我想开通一个Google Adsense帐号,因为以前注册过一个Google帐号,所以我以为两个是可以共通的,因为很久没上Google帐号,我记不太清密码了,所以我先是登录了Google,登上去了 ...

  5. Dubbo与Zookeeper、Spring整合使用

    Dubbo与Zookeeper.Spring整合使用 Dubbo采用全spring配置方式,透明化接入应用,对应用没有任何API侵入,只需用Spring加载Dubbo的配置即可,Dubbo基于Spri ...

  6. Jquery阻断事件冒泡(转载)

    JQuery阻止事件冒泡 冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个d ...

  7. MySQL 创建数据库的两种方法

    使用 mysqladmin 创建数据库 使用普通用户,你可能需要特定的权限来创建或者删除 MySQL 数据库. 所以我们这边使用root用户登录,root用户拥有最高权限,可以使用 mysql mys ...

  8. 「SHOI2015」自动刷题机

    /* 有理有据的二分答案 因为在过程中最多减到零 所以n越小显然就能刷更多的题 无解时就是无论如何也无法得到k , 这个特判一下即可 */ #include<cstdio> #includ ...

  9. 【RabbitMQ】ubuntu下RabbitMQ安装与简单使用

    参考:https://blog.csdn.net/the_fool_/article/details/80570971 1.安装: https://blog.csdn.net/a295277302/a ...

  10. 门禁系统socket通讯编程

    最近遇到一个socke udp协议通讯的需求,而且是16进制数据接收.这样在传输参数的时候老是提示参数错误,因为计算机是不能直接传输16进制的,会自行转换,所有以下代码非常完美的解决我的问题,同时也让 ...