【转】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. 用户反馈：对 Rafy 开发框架的一些个人建议

      这篇文章是去年 Rafy 框架发布后,许胜平先生为我提出的一些建议.他从用户群体分析.社区.商业模式.技术支持等方面对框架发展提出了建议,我觉得写得非常不错.此文不仅适用于 Rafy 框架,所以不 ...

  2. React Native文件介绍

    一.index.ios.js文件中的东西 index.ios.js文件,是js代码的入口文件,所有的代码编写从这开始,可以定义自己的模块和引入第三方模块. import React, { Compon ...

  3. Buff系统设计

    我就随便一写,你也就随便一看吧.   什么是BUFF?   或许直接回答这个问题,那么你收获到的答案将是五花八门的.这个问题暂时放下不谈,我们可以去看其他的游戏应该是怎么设计的. 我经常玩的游戏里边B ...

  4. Xamarin.Android之封装个简单的网络请求类

    一.前言 回忆到上篇 <Xamarin.Android再体验之简单的登录Demo> 做登录时,用的是GET的请求,还用的是同步, 于是现在将其简单的改写,做了个简单的封装,包含基于Http ...

  5. 关于在aspx前台使用后台变量的问题

    我们经常会在后台定义一个变量,然后在用<%=变量名%>这种方式去获取,但是有时候<head></head>里面获取变量的时候,有时候会获取不到是怎么回事呢 前台: ...

  6. Elasticsearch 的坑爹事——记录一次mapping field修改过程

    Elasticsearch 的坑爹事 本文记录一次Elasticsearch mapping field修改过程 团队使用Elasticsearch做日志的分类检索分析服务,使用了类似如下的_mapp ...

  7. 图解SQL的Join(转)

    对于SQL的Join,在学习起来可能是比较乱的.我们知道,SQL的Join语法有很多inner的,有outer的,有left的,有时候,对于Select出来的结果集是什么样子有点不是很清楚.Codin ...

  8. ArcGIS标注

    关于ArcGIS的标注问题整理. 要求: 保留小数点后三位, 若原数据小于1(.12345),对小数加0显示 分行显示两个字段值 解决: 右击图层 -- ”properties“(属性) 中选择“la ...

  9. Could not publish server configuration for Tomcat v6.0 Server at localhost.

    经常在使用tomcat服务器的时候 总会发生一些莫名其妙的错误. 就像下面这个错误: 在配置文件中存在多个/MyWeb的配置,导致不能发布服务. 错误信息: Could not publish ser ...

  10. jquery.dataTable.js 基础配置

    $(document).ready(function () { $('#dataTables-example').DataTable({ responsive: true, "bPagina ...