HTML5之窗口间通信
2016-06-25 19:37
387 查看
准备工作：虚拟主机相关配置
同域下窗口间通信的二种方式:1.iframe 2 window.open
同域下的窗口通信
方式一：iframe
1. iframe.html
（1） 父级页面(1.iframe.html)通过点击按钮改变子级页面（2.iframe.html）的背景颜色
<script>
/*
我们可以通过js去访问被包含页面的DOM元素
*/
window.onload = function() {
varoBtn = document.getElementById('btn');
varoMyIframe = document.getElementById('myframe');
oBtn.onclick= function() {
//如果我们要操作一个iframe里面的dom元素，首先要获取到iframe引入的页面的window
//oMyIframe.contentWindow -> 被iframe包含的页面的window对象
//alert(oMyIframe.contentWindow); [object window]
oMyIframe.contentWindow.document.body.style.background= 'red';
}
}
</script>
</head>
<body>
<inputtype="button" value="点击我，改变2.iframe.html的背景色" id="btn" />
<iframeid="myframe" src="2.iframe.html"></iframe>
</body>
（2） 子级页面同样可以通过按钮改变父级页面的背景颜色
父级引用子级使用contentwindow
子级引用父级使用parent
//parent =>window 如果当前页面是顶级，没有被其他页面所包含，那么parent就是当前页面的window对象，那么如果被包含了，则parent就是包含当前页面的父级页面的window对象
window: 当前窗口
parent: 父级窗口
top: 顶级窗口
同域下父子级相互操作
2.iframe.html子页面
<script>
window.onload = function() {
varoBtn = document.getElementById('btn');
oBtn.onclick= function() {
//parent=> window 如果当前页面是顶级，没有被其他页面所包含，那么parent就是当前页面的window对象，那么如果被包含了，则parent就是包含当前页面的父级页面的window对象
parent.document.body.style.background= 'green';
}
/*
window: 当前窗口
parent: 父级窗口
top: 顶级窗口
*/
}
</script>
</head>
<body>
这里是a.com下的2.iframe.html页面
<input type="button" value="点击我，改变1.iframe.html的背景色" id="btn" />
</body>
方式二：window.open
（1） 父级窗口中通过点击第一个按钮，打开一个新窗口，点击第二个按钮，改变新窗口的背景颜色
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
varoBtn = document.getElementById('btn');
varoBtn2 = document.getElementById('btn2');
varnewWindow = null;
oBtn.onclick= function() {
//window.open返回被打开窗口的window对象
newWindow= window.open('4.window.open.html', '_blank');
}
oBtn2.onclick= function() {
newWindow.document.body.style.background = 'red';
}
}
</script>
</head>
<body>
<inputtype="button" value="点击我，开启一个新的窗口打开4.window.open.html页面" id="btn" />
<input type="button" value="点击我，改变4.window.open.html页面的背景色" id="btn2" />
</body>
（2） 子页面通过window.opener改变父级窗口样式
<script>
window.onload = function() {
varoBtn = document.getElementById('btn');
oBtn.onclick= function() {
//window.opener: 通过window.open方法打开当前页面的窗口window
window.opener.document.body.style.background = 'green'
}
}
</script>
</head>
<body>
这是a.com下的4.window.open.html页面
<input type="button" value="点击我，改变3.window.open.html页面的背景色" id="btn" />
</body>
窗口跨域操作问题
当本页面和包含页面不在同一个域名下的时候，这样操作就会有跨域操作安全限制问题。
通过postMessage可以解决跨域间通信问题
父页面发送一个口令给子页面，子页面做相关的操作
父页面：
<script>
window.onload = function() {
varoBtn = document.getElementById('btn');
varoMyIframe = document.getElementById('myframe');
/*
postMessage: 可以通过这个方法给另外一个窗口发送信息
接收消息的窗口的window对象.postMessage();
*/
oBtn.onclick= function() {
//当本页面和包含页面不在同一个域名下的时候，这样操作就会有跨域操作安全限制问题。
//oMyIframe.contentWindow.document.body.style.background= 'red';
oMyIframe.contentWindow.postMessage('1', 'http://www.b.com');
/*
第一个参数：发送的数据
第二个参数：接收数据的域名｛带上协议｝
*/
//alert(oMyIframe.contentWindow.postMessage)
}
}
</script>
</head>
<body>
<inputtype="button" value="点击我，改变2.iframe.html的背景色" id="btn" />
<iframeid="myframe" src="http://www.b.com/3.postMessage.html"></iframe>
</body>
子页面：
window.onload = function() {
/*
message : 当窗口接收到通过postMessage发送过来的数据的时候触发
*/
window.addEventListener('message',function(ev) {
//alert('b.com下的页面接收到了内容了');
//message事件的事件对象下保存了发送过来的内容
//ev.data:
发送过来的数据//1
//ev.origin 消息是从哪里发送出来的
//alert('我接收到了a.com页面发送过来的数据，内容是：' + ev.data);
//alert(ev.origin);
if(ev.data == '1') {
document.body.style.background= 'red';
}
},false);
}
</script>
分辨消息是谁发给我的消息
Event.origin 消息是从哪里发送出来的
同域下窗口间通信的二种方式:1.iframe 2 window.open
同域下的窗口通信
方式一：iframe
1. iframe.html
（1） 父级页面(1.iframe.html)通过点击按钮改变子级页面（2.iframe.html）的背景颜色
<script>
/*
我们可以通过js去访问被包含页面的DOM元素
*/
window.onload = function() {
varoBtn = document.getElementById('btn');
varoMyIframe = document.getElementById('myframe');
oBtn.onclick= function() {
//如果我们要操作一个iframe里面的dom元素，首先要获取到iframe引入的页面的window
//oMyIframe.contentWindow -> 被iframe包含的页面的window对象
//alert(oMyIframe.contentWindow); [object window]
oMyIframe.contentWindow.document.body.style.background= 'red';
}
}
</script>
</head>
<body>
<inputtype="button" value="点击我，改变2.iframe.html的背景色" id="btn" />
<iframeid="myframe" src="2.iframe.html"></iframe>
</body>
（2） 子级页面同样可以通过按钮改变父级页面的背景颜色
父级引用子级使用contentwindow
子级引用父级使用parent
//parent =>window 如果当前页面是顶级，没有被其他页面所包含，那么parent就是当前页面的window对象，那么如果被包含了，则parent就是包含当前页面的父级页面的window对象
window: 当前窗口
parent: 父级窗口
top: 顶级窗口
同域下父子级相互操作
2.iframe.html子页面
<script>
window.onload = function() {
varoBtn = document.getElementById('btn');
oBtn.onclick= function() {
//parent=> window 如果当前页面是顶级，没有被其他页面所包含，那么parent就是当前页面的window对象，那么如果被包含了，则parent就是包含当前页面的父级页面的window对象
parent.document.body.style.background= 'green';
}
/*
window: 当前窗口
parent: 父级窗口
top: 顶级窗口
*/
}
</script>
</head>
<body>
这里是a.com下的2.iframe.html页面
<input type="button" value="点击我，改变1.iframe.html的背景色" id="btn" />
</body>
方式二：window.open
（1） 父级窗口中通过点击第一个按钮，打开一个新窗口，点击第二个按钮，改变新窗口的背景颜色
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
varoBtn = document.getElementById('btn');
varoBtn2 = document.getElementById('btn2');
varnewWindow = null;
oBtn.onclick= function() {
//window.open返回被打开窗口的window对象
newWindow= window.open('4.window.open.html', '_blank');
}
oBtn2.onclick= function() {
newWindow.document.body.style.background = 'red';
}
}
</script>
</head>
<body>
<inputtype="button" value="点击我，开启一个新的窗口打开4.window.open.html页面" id="btn" />
<input type="button" value="点击我，改变4.window.open.html页面的背景色" id="btn2" />
</body>
（2） 子页面通过window.opener改变父级窗口样式
<script>
window.onload = function() {
varoBtn = document.getElementById('btn');
oBtn.onclick= function() {
//window.opener: 通过window.open方法打开当前页面的窗口window
window.opener.document.body.style.background = 'green'
}
}
</script>
</head>
<body>
这是a.com下的4.window.open.html页面
<input type="button" value="点击我，改变3.window.open.html页面的背景色" id="btn" />
</body>
窗口跨域操作问题
当本页面和包含页面不在同一个域名下的时候，这样操作就会有跨域操作安全限制问题。
通过postMessage可以解决跨域间通信问题
父页面发送一个口令给子页面，子页面做相关的操作
父页面：
<script>
window.onload = function() {
varoBtn = document.getElementById('btn');
varoMyIframe = document.getElementById('myframe');
/*
postMessage: 可以通过这个方法给另外一个窗口发送信息
接收消息的窗口的window对象.postMessage();
*/
oBtn.onclick= function() {
//当本页面和包含页面不在同一个域名下的时候，这样操作就会有跨域操作安全限制问题。
//oMyIframe.contentWindow.document.body.style.background= 'red';
oMyIframe.contentWindow.postMessage('1', 'http://www.b.com');
/*
第一个参数：发送的数据
第二个参数：接收数据的域名｛带上协议｝
*/
//alert(oMyIframe.contentWindow.postMessage)
}
}
</script>
</head>
<body>
<inputtype="button" value="点击我，改变2.iframe.html的背景色" id="btn" />
<iframeid="myframe" src="http://www.b.com/3.postMessage.html"></iframe>
</body>
子页面：
window.onload = function() {
/*
message : 当窗口接收到通过postMessage发送过来的数据的时候触发
*/
window.addEventListener('message',function(ev) {
//alert('b.com下的页面接收到了内容了');
//message事件的事件对象下保存了发送过来的内容
//ev.data:
发送过来的数据//1
//ev.origin 消息是从哪里发送出来的
//alert('我接收到了a.com页面发送过来的数据，内容是：' + ev.data);
//alert(ev.origin);
if(ev.data == '1') {
document.body.style.background= 'red';
}
},false);
}
</script>
分辨消息是谁发给我的消息
Event.origin 消息是从哪里发送出来的
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5 canvas画布（四）
- h5学习笔记： ul和li组合
- H5学习笔记之a标签、分组元素
- HTML5 绘制图形canvas 初次接触
- 仿HTML5 CSS "标签云"特效-优化效率版
- HTML5基础知识（2）--标题标签的使用
- 专为HTML5开发的骨骼动画引擎AlloyStick
- HTML5基础知识（1）--上标和下标文本
- html5标签汇总
- html5 canvas基本用法
- HTML5 UI 控件Mobiscroll的使用（年月日三级联动）
- fiddler高级使用技巧
- swiper的基础使用（十三）
- HTML5中Canvas与SVG的画图
- HTML5 实现手机拍照上传
- HTML5 canvas画布（三）
- 浅析HTML5中header标签的用法
- 玩转html5 canvas
- HTML4 和 HTML5 的10个关键区别
- canvas — 非零环绕规则