项目中通过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 GUI(忽略)

    觉得学起来很鸡肋.就不学这玩意了

  2. 在VS2013平台下如何快速解决c++代码内存泄漏问题

    在学习FPS3000人脸关键点定位算法时,发现github上的源码,存在大量的内存泄漏问题,在训练的时发现内存一直在增长,测试的时候也存在内存无法彻底释放的问题. 一直以为是存放模型参数vector& ...

  3. selenium操作隐藏的元素 (下拉框类型)

    有时候我们会碰到一些元素不可见,这个时候selenium就无法对这些元素进行操作了.例如,下面的情况: Python 页面主要通过“display:none”来控制整个下拉框不可见.这个时候如果直接操 ...

  4. 【转载】Linux内存中buffer和 cached的比较

    经常遇到一些刚接触Linux的新手会问内存占用怎么那么多? 在Linux中经常发现空闲内存很少,似乎所有的内存都被系统占用了,表面感觉是内存不够用了,其实不然.这是linux内存管理的一个优秀特性,在 ...

  5. pyplot　绘图与可视化

    1. 基本使用 #!/usr/bin/env python # coding=utf-8 import matplotlib.pyplot as plt from numpy.random impor ...

  6. Android logcat命令详解

    一.logcat命令介绍 1.android log系统 2.logcat介绍 logcat是android中的一个命令行工具,可以用于得到程序的log信息 log类是一个日志类,可以在代码中使用lo ...

  7. 启动 node 文件时附带参数

    cmd: node app.js hello app.js var args = process.argv; console.log(args);//[ 'C:\\Program Files\\nod ...

  8. 显式锁（四）Lock的等待通知机制Condition

       任意一个Java对象,都拥有一组监视器方法(定义在根类Object上),主要包括:wait( ).wait(long timeout).notify().notifyAll()方法:这些方法与关 ...

  9. js实现复选框的全选和全不选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  10. python 编码文件json.loads json.dumps

    import yaml d = {'name': '张三', 'age': '1'} print d jd = json.dumps(d, ensure_ascii=False, encoding=' ...