项目中通过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. Spring MVC 原生API

    原生API: Servlet环境中一些有用的对象: HttpServletRequest HttpServletResponse HttpSession Reader Writer InputStre ...

  2. 第15章 高并发服务器编程（1）_非阻塞I/O模型

    1. 高性能I/O (1)通常,recv函数没有数据可用时会阻塞等待.同样,当socket发送缓冲区没有足够多空间来发送消息时,函数send会阻塞. (2)当socket在非阻塞模式下,这些函数不会阻 ...

  3. 解决“Can't bind to local 8630 for debugger”错误--查杀多余进程

    Can't bind to local 8630 for debugger 表明本地8630端口被占用 1.Windows平台 在windows命令行窗口下执行: 1.查看所有的端口占用情况 C:\& ...

  4. 深度学习、图像识别入门，从VGG16卷积神经网络开始

    刚开始接触深度学习.卷积神经网络的时候非常懵逼,不知道从何入手,我觉得应该有一个进阶的过程,也就是说,理应有一些基本概念作为奠基石,让你有底气去完全理解一个庞大的卷积神经网络: 本文思路: 一.我认为 ...

  5. Spring Boot: Cannot determine embedded database driver class for database type NONE

    配置启动项时提示如下: 原因是:springboot启动时会自动注入数据源和配置jpa 解决: 1 在@SpringBootApplication中排除其注入 @SpringBootApplicati ...

  6. __del__,item系列 ,hash方法,__eq__,

    # 构造方法 申请一个空间# 析构方法 释放一个空间 # 某个对象借用了操作系统的资源,还要通过析构方法归还回去:文件资源 网络资源 # 垃圾回收机制 class A: def __del__(sel ...

  7. 关于VS+ImageWatch在线调试问题

    1.使用VS肯定离不开在线调试 2.使用Opencv在VS下进行图像处理,那肯定少不了Image Watch 这两个软件在线调试都存在大坑,弄得精疲力尽才找到解决办法!!! 以下问题都可以通过这个设置 ...

  8. javascript日期相减，求时间差

    //计算时间差 var from_date = new Date(from_time); var end_date = new Date(end_time); var time_different = ...

  9. html-字体

    字体大小 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  10. ganglia

    A.lamp界面快速搭建---------------------------------------------------------------------------------------- ...