【转】iframe和父页，window.open打开页面之间的引用

iframe和父页，window.open打开页面和被打开页面之间的关系可以通过下面的对象获取到

　　1)通过iframe加载的，在iframe中用parent对象得到父页window作用域，如果iframe中又加载了iframe，在最里层的iframe中需要重复调用parent.parent得到其上一级iframe的引用。如果是直接引用最顶级的父页作用域，可以使用top对象。

　　2)父页使用document.getElementById("iframe的id").contentWindow得到iframe的window作用域，如果iframe还继续嵌套了iframe，则还需要继续执行.getElementById("iframe的id").contentWindow操作才能得到内层iframe的作用域。如:

 var ifrWin=document.getElementById("iframe的id").contentWindow.getElementById("再次被嵌套的iframe的id").contentWindow;

　　

　　3)aaa.html中使用 var win=window.open("xxx.html")，win就是xxx.html的window作用域，xxx.html中使用opener对象得到打开这个页面的window作用域。如果xxx.html又打开了bbb.html，那么bbb.html中使用opener.opener得到aaa.html作用域，aaa.html要想得到bbb.html作用域，那么xxx.html需要保存打开bbb.html的作用域如var win=window.open("bbb.html")，那么aaa.html通过win.win就得到bbb.html的作用域了.

　　通过上面的介绍知道了关系之后，就很容易从一个页面更新到其他通过window.open或者iframe嵌套的子页面或者父页面了。

　　备注：chrome浏览器下本地测试iframe不能互访，chrome浏览器iframe parent.document为undefined.

　　测试脚本的时候发现，在谷歌chrome浏览器下面，iframe中获取父页的document时竟然为undefined，google chrome神奇了，其他浏览器如ie，firefox没出现这种问题。

　　iframe要获取到父页的document对象，需要通过服务器，就是http协议访问时才能获取到，要不直接双击运行【chrome为默认浏览器】或者直接拖进chrome浏览器查看时，iframe使用parent.document得到的是undefined。

测试代码:

test.html

 <html>

    <head></head>

    <body><input type="text" id="txt" />

    <br />

    <iframe src="ifr.html"></iframe></body>

 </html>

ifr.html

 <input type="button" onclick="setValue()" value="设置父页输入框内容" />

 <script>

     function setValue() {

         alert(parent.document)　　//非http协议访问输出undefined，http协议访问时输出[object HTMLDocument]

         var ipt = parent.document.getElementById('txt');　　//本地浏览由于parent.document为undefined，所以当然无法使用getElementById方法了

         ipt.value = new Date().toLocaleString();

     }

 </script>

EOM

原文转自编程设计网，文章所有权，解释权归原作者。

Lionden 2015年8月9日

E-mail：hsdlionden@hotmail.com

转载请注明原文地址和博客园Lionden：http://www.cnblogs.com/lionden/

【转】iframe和父页，window.open打开页面之间的引用的更多相关文章

  1. 点击按钮使用window.open打开页面后，再次点击按钮会再打开一个页面，如何解决？

    点击按钮使用window.open打开页面后,再次点击按钮会再打开一个页面,如何解决? window.open("page1.html","win1"); 这句 ...

  2. Vue-cli 2.9 多页配置及多页面之间的跳转问题

    vue开发,现在大部分做的都是(SPA)应用,但是,由于,需求不同,我们针对的用户需求变更较为,频繁,如果每次都全量打包更新,给开发的自测,及测试妹子的任务就会多,每次都要重新验证一下才放心.所以,想 ...

  3. window.open()打开页面

    一.window.open()支持环境:JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法:window.open(pageURL,name,pa ...

  4. iframe父页调子页和子页调父页方法

    子页调用父页 window.parent.myChart.resize(); 父页调用子页 $("iframe")[0].contentWindow.myChart.resize( ...

  5. iframe 和 父窗口传递

    iframe 向父窗口 window.parent.postMessage('向父窗口传递值',*); 父窗口向 iframe 内部子窗口传值 documnet.querySelector('ifra ...

  6. window.open打开新窗口 参数

    1,基本描述 oNewWindow = window.open( sURL , sName , sFeatures, bReplace) window.open在打开一个窗口(其url为sURL)后, ...

  7. 父<IFRAME>获取子页属性以及子页中<IFRAME>的方法

    例子如下: 1.父页index.jsp <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "ht ...

  8. 高并发分布式系统中生成全局唯一（订单号）Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  9. HTML：模拟链接被按下，在新标签页打开页面，不使用window.open(可能被拦截)

    当按下一个按钮时,想打开一个新的标签页,可以使用window.open去实现但是因为使用window.open在新窗口或者新标签页中打开页面,有可能被浏览器给拦截.为了解决这个问题,可以模拟链接被按下 ...

随机推荐

  1. 你真的了解DOM事件么？

    你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...

  2. 关于C#的继承结论

    1.继承:继承是一个类可以使用另一个类的属性和方法(成员) 2.子类继承父类使用的符号为“  : ”(冒号) 3.子类可以继承父类私有成员,但不能访问(不能使用) 4.父类的构造,子类不能被继承 5. ...

  3. VS2013设置护眼背景颜色

    打开VS2013 —> 工具 —> 选项 —> 环境 —> 字体和颜色 —> 选择显示项中的纯文本 —> 项目背景 —> 自定义—> 色调位85.饱和度 ...

  4. TypeError: invalid 'in' operand obj

    尝试在程序去访问远程的Web API,它在运行时,出现异常: TypeError: invalid 'in' operand obj 由于从服务器返回的数据是json.当我们需要得到这些数据时,还得需 ...

  5. jenkins中使用tfs插件做增量的版本发布部署

    一 配置介绍 使用jenkins的tfs插件进行,源码的下载,编译,打包的操作,然后使用windows的批处理命令,在局域网内(或者本机)把打包的release包,删除掉web.config,然后靠配 ...

  6. No.024：Swap Nodes in Pairs

    问题: Given a linked list, swap every two adjacent nodes and return its head. For example, Given 1-> ...

  7. java web学习总结(十八) -------------------过滤器的高级使用

    在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可以使用Decorator(装饰器)模式对request.response对象进行包装,再把包装对象传给目 ...

  8. jQuery：详解jQuery中的事件（一）

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  9. 【原创-算法-实现】异步HTTP请求操作

    一.说明 1) 这个类 是我 在真实项目中,优化解决真实问题 时,不参考第三方代码,完全由自己查阅MSDN官方文档 , 完成的一个真实生产环境中使用的功能类 2) 读者在使用此类时,请尊重原创,在代码 ...

  10. ul ol di三者区别

    1.ul是无序列表,也就是说没有排列限制可以随意加li: <ul> <li>可以随意放置</li> <li>可以随意放置</li> < ...