iframe,modaldialog父子窗口相互通信的问题
--- 子窗口访问父窗口的window对象 ---
打开新窗口一般有几种方法，window.open(...),window.showModalDialog(...)，以及iframe中嵌套页面，另外还有window.navigate
(...)、window.location.href="..."、window.history.back(-1);都是实现同一页面内容跳转的，这里不讨论。
****************************************
window.navigate('http://www.baidu.com'); //IE ONLY
window.location.href='http://www.baidu.com'; // all
window.open(URL,name,features,replace)
| 参数 | 描述 |
|---|---|
| URL | 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。 |
| name | 一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。 |
| features | 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。 |
| replace |
一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
|
四.窗口特征（Window Features）
| channelmode=yes|no|1|0 | 是否使用剧院模式显示窗口。默认为 no。 |
| directories=yes|no|1|0 | 是否添加目录按钮。默认为 yes。 |
| fullscreen=yes|no|1|0 | 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。 |
| height=pixels | 窗口文档显示区的高度。以像素计。 |
| left=pixels | 窗口的 x 坐标。以像素计。 |
| location=yes|no|1|0 | 是否显示地址字段。默认是 yes。 |
| menubar=yes|no|1|0 | 是否显示菜单栏。默认是 yes。 |
| resizable=yes|no|1|0 | 窗口是否可调节尺寸。默认是 yes。 |
| scrollbars=yes|no|1|0 | 是否显示滚动条。默认是 yes。 |
| status=yes|no|1|0 | 是否添加状态栏。默认是 yes。 |
| titlebar=yes|no|1|0 | 是否显示标题栏。默认是 yes。 |
| toolbar=yes|no|1|0 | 是否显示浏览器的工具栏。默认是 yes。 |
| top=pixels | 窗口的 y 坐标。 |
| width=pixels | 窗口的文档显示区的宽度。以像素计。 |
--- example: ---
var url=document.location.href; //获得本窗口属性名
newWin=window.open(url,'','fullscreen=1,scrollbars=0');
window.opener=null;//出掉关闭时候的提示窗口
window.open('','_self'); //ie7
window.close();
*********************************
1、window.open打开子窗口：子窗口中用window.opener访问父窗口的window对象
2、window.showModalDialog打开模态子窗口：把父窗口的window对象作为参数传入子窗口，如：
window.showModalDialog('3.html', window);
// -- 3.html --
var parentWindow = window.dialogArguments
3、iframe子页面中：用window.parent访问父窗口的window对象
--- iframe用法总结 ---
mpage.html:
<!doctype html>
<html>
<head>
<title>iframe about contentWindow contentDocument</title>
<meta charset="utf-8" />
</head>
<body>
<h1 id="mtitle">美丽的一天</h1>
<p>早上吃早点，中午约会吃饭，下午K歌</p>
<iframe id="ifrm" name="ifrmWin" src="ipage.html" frameborder="0" ></iframe>
<script>
function $id(id){return document.getElementById(id); }
// ifrmNode.document 最简洁
/*result=> chrome: undefined, firefox:undefined ,ie8:document */
console.log($id('ifrm').document);
//ifrmNode.contentWindow 基本兼容
/*result=> chrome: window , firefox:window, ie8:window*/
console.log($id('ifrm').contentWindow);
//iframNode.contentDocument 标准且快捷
/* result=> chrome: document, firefox:document, ie8:document */
console.log($id('ifrm').contentDocument);
</script>
</body>
</html>
ipage.html:
<!doctype html>
<html>
<head>
<title>iframe page</title>
<meta charset="utf-8" />
</head>
<body>
<h1 id="ititle">美丽的一天的下午</h1>
<p>吃饭看书</p>
</body>
</html>
下面讨论ie下JS是怎么操作以上两个页面，再讨论firefox的做法，最后给出兼容ie,firefox浏览器操作iframe对象的方法。
一、ie下访问操作iframe里内容
1. ie通过document.frames["ifrmWin"]获取iframe对象 ~~~ie: 可通过ifrmNode.document获得子页面的document对象
window.onload = function () {
alert(document.frames["ifrmWin"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);
};
2. ie另一种方法contentWindow获取它，代码： ~~~ ie&firefox: 通过ifrmNode.contentWindow获得子页面的window对象
window.onload = (function () {
var iObj = document.getElementById(‘ifrm‘).contentWindow;
alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);
});
此方法经过ie6,ie7,firefox2.0,firefox3.0测试都通过，好事啊！嘿嘿。（网上一查，发现Mozilla Firefox
iframe.contentWindow.focus缓冲区溢出漏洞，有脚本注入攻击的危险。
后来听说可以在后台防止这样的事情发生，算是松了口气。不过还是希望firefox新版本可以解决这样的危险。）
二、firefox下访问操作iframe里内容
Mozilla支持通过IFrameElmRef.contentDocument访问iframe的document对象的W3C标准，通过标准可以少
写一个document,代码：~~~firefox: ifrmNode.contentDocument 直接获取到子页面的document对象
var iObj = document.getElementById(‘ifrm‘).contentDocument;
alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘);
alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data);
兼容这两种浏览器的方法，现在也出来了，就是使用contentWindow这个方法。
嘿嘿！操作iframe是不是可以随心所欲了呢？如果还觉得不爽，你甚至可以重写iframe里的内容。
三、重写iframe里的内容
通过designMode（设置文档为可编辑设计模式）和contentEditable（设置内容为可编辑），你可以重写iframe里的内容。代码：
var iObj = document.getElementById(‘ifrm‘).contentWindow;
iObj.document.designMode = ‘On‘;
iObj.document.contentEditable = true;
iObj.document.open();
iObj.document.writeln(‘<html><head>‘);
iObj.document.writeln(‘<mce:style><!--
body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}
--></mce:style><style mce_bogus="1">body
{background:#000;font-size:9pt;margin: 2px; padding:
0px;}</style>‘);
iObj.document.writeln(‘</head><body></body></html>‘);
iObj.document.close();
四、iframe自适应高度
有了上面的原理要实现这个相当简单，就是把iframe的height值设置成它里面文档的height值就可以。代码：
window.onload = (function () {
var iObj = document.getElementById(‘ifrm‘);
iObj.height = iObj.contentWindow.document.documentElement.scrollHeight;});
现在对JS操作iframe你已经有了全新的认识，说不定那天会因为这个有什么新的web技术名词，嘿嘿，臭美下！
PS:
1. Document.designMode
,Document.contentEditable在你这里的使用场景错了,他一般是应用在在线编辑器上的,如果你并不是开放给用户操作的话,根本没必
要设置这个属性!
2. 另外之所以要用
window.onload,是因为页面加载中,iframe的加载顺序是在最后的,也就是说,在没用window.onload的情况下,在执行你那段
js的时候iframe里的dom都还没加载到,这样自然是无输出的了
3. 如果是在两个不同的子域下，上面的代码需要做小的改动。
调用iframe的页面和被iframe的页面需要增加设置 document.domain 的代码，指明同一个根域即可。
iframe,modaldialog父子窗口相互通信的问题的更多相关文章
- Flex父子窗口相互调用
Flex父子窗口相互调用 1.设计思路 (1)子窗口调用父窗口的方法 (2)子窗口做了修改后,返回父窗口,父窗口调用子窗口函数 2.设计源码 (1)父窗口 ParentWindow.mxml: < ...
- Vue2.x中的父子组件相互通信
业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template ...
- iframe子父窗口相互操作方法或元素
一.jquery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...
- vue组件父子之间相互通信案例
- iFrame 父子窗口通讯
今天就来说说 iFrame 的父子窗口通讯,关于 iFrame 这里就不陈述了,想要了解的盆友可以百度一下, 由于项目需要,前些天用到了个弹框框架 layer 弹出层,有很多弹出的方式,其中一种就是用 ...
- Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用
Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用 Ext.ux.IFrame Extjs官方提供的一个组件,可以很方便的使用. 这样就完成了一个简单的IFrame的使用,通过E ...
- JS方法在iframe父子窗口间的调用
本文向大家简单介绍一下iframe父子窗口间JS方法调用,JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用,希望本文介绍对你有所帮助. if ...
- iframe之父子页面通信
iframe之父子页面通信 1.获取 子页面 的 window 对象 在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindo ...
- RXJS组件间超越父子关系的相互通信
RXJS组件间超越父子关系的相互通信 用到这个的需求是这样的: 组件A有数据变化,将变化的数据流通知组件B接收这个数据流并做相应的变化 实例化RXJS的subject对象 import { Injec ...
随机推荐
- hdu 5461 Largest Point
Thinking about it: 对于式子 a * ti * ti + b * tj,可以看作时有两部分构成 a * ti * ti 和 b * tj,如果整个式子要最大,则要求这两部分都要尽量大 ...
- Android UI设计
Android UI设计--PopupWindow显示位置设置 摘要: 当点击某个按钮并弹出PopupWindow时,PopupWindow左下角默认与按钮对齐,但是如果PopupWindow是下图的 ...
- 基于SMTP协议的CMD命令邮件发送
网上有不少的这类的文章,以是参照这些文章后,自己实际运行的结果.系统使用的是WIN7 旗舰版. 1.打开CMD命令后,连接到SMTP服务器,如连接到QQ的SMTP服务,输入命令 telnet smtp ...
- 文件上传下载样式 --- bootstrap
在平时工作中,文件上传下载功能属于不可或缺的一部分.bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式. 后续会使用spring MVC框 ...
- css3选择器的比较（二） -- 包含字符串
二. 包含“字符串” 两种用法的区别是: a. “~=”,需要用空格分割, b. "*=",不需要任何分隔符 1. 资料 a) b) 2. html代码 <div tit ...
- [Jobdu] 题目1283：第一个只出现一次的字符
题目描述: 在一个字符串(1<=字符串长度<=10000,全部由大写字母组成)中找到第一个只出现一次的字符. 输入: 输入有多组数据每一组输入一个字符串. 输出: 输出第一个只出现一次的字 ...
- Construct Binary Tree From Inorder and Preorder/Postorder Traversal
map<int, int> mapIndex; void mapToIndex(int inorder[], int n) { ; i < n; i++) { mapIndex.in ...
- 【转】Qt Mode/View
1.view与Widget 在UI中,最常用的就是list/grid/tree了(在Qt中,grid被称为table).尤其是做那些数据库相关的程序,可能每个界面都要用到 list或grid.在Qt中 ...
- [置顶] 老孟 DB2 V9.7 ESE（一）产品部署 基于centOS 6.4
本文安装系统CENTOS 6.4 DB2位数64 安装中涉及目录位置各位可自行定义 生产系统为安全和性能考虑,一般将DB2实例目录.日志目录.归档日志目录.表空间目录区分开,可建立/db2home / ...
- YII框架下实现密码修改
YII2 实现修改密码功能 主要难点: 1.密码加密 YII2对密码加密生成的结果是不同的,即用相同的初始密码在不同时间得到的加密结果不同,所以我们不能用常用的方法去验证密码是否正确(将密码加密后与数 ...