html5 跨文档消息传输示例探讨


Posted in HTML / CSS onApril 01, 2013

对窗口对象的message事件进行监听

复制代码
代码如下:

window.addEventListener("message", function(event) {
// 处理程序代码
}, false);

使用window对象的postMessage()方法向其他窗口发送消息,该方法的定义如下:
复制代码
代码如下:

otherwindow.postMessage(message, targetOrigin);

该方法使用两个参数:第一个参数为所发送的消息文本,但也可以是任何JavaScript对象(通过JSON转换对象为文本);第二个参数为接收消息的对象窗口的URL地址,可以在URL地址字符串中使用通配符“*”指定全部地址,不过建议使用准确的URL地址。otherwindow为要发送窗口对象的引用,可以通过window.open()方法返回该对象,或通过对window.frames数组指定序号(index)或名字的方式来返回单个frame所属性的窗口对象。
示例
复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>跨文档消息传输示例主文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function() {
// 监听message事件。
window.addEventListener("message", function(event) {
// 忽略指定URL之外的页面发送的消息。
if(event.origin != "http://www.blue-butterfly.net") return;
alert(event.data); // 显示消息。
}, false);
$("#iframeContent").load(function(event) {
// 向子页面发送消息
this[0].postMessage("Hello", "http://www.blue-butterfly.net/test/");
});
});
</script>
</head>
<body>
<header>
<h1>跨域通信示例</h1>
</header>
<iframe id="iframeContent" width="400" src="http://www.blue-butterfly.net/test/"></iframe>
</body>
</html>

子页面中的代码如下:
复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function() {
window.addEventListener("message", function(event) {
if(event.origin != "http://Lulingniu") return;
$("#console").append(event.origin).append("传来的消息:").append(event.data);
// 向主页面发送消息。
event.source.postMessage("Hello, there is :" + this.location, event.origin);
}, false);
});
</script>
</head>
<body>
<p>这是iframe中的内容。</p>
<div id="console"></div>
</body>
</html>

•通过对window对象的message事件进行监听,可以接收消息。
•通过访问message事件的origin属性,可以获取消息的发送源(本例中主页面的发送源为“http://Lulingniu”,子页面的发送源为“http://www.blue-butterfly.net”)。注意:发送源与网站的URL地址不是一个概念,发送源只包括域名与端口号,为了不接收其他源恶意发送过来的消息,最好对发送源做检查。
•通过访问message事件的data属性,可以取得消息内容(可以是任何JavaScript对象,使用JSON)。
•使用postMessage()方法发送消息。
•通过访问message事件的source属性,可以获取消息发送源的窗口的代理对象。
HTML / CSS 相关文章推荐
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 #HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 #HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 #HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 #HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 #HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 #HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 #HTML / CSS
You might like
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php实现无限级分类
2014/12/24 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
javascript中this关键字详解
2016/12/12 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
python简单实现9宫格图片实例
2020/09/03 Python
如何编写python的daemon程序
2021/01/07 Python
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
一篇.NET面试题
2014/09/29 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
公司年会演讲稿范文
2014/01/11 职场文书
计算机专业职业规划
2014/02/28 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
中学社团活动总结
2015/05/07 职场文书