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使用技巧5个
Apr 02 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 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
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
python调用百度语音REST API
2018/08/30 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
Python 解析简单的XML数据
2020/07/24 Python
python包的导入方式总结
2021/03/02 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
纠纷协议书
2014/04/16 职场文书
摄影展策划方案
2014/06/02 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
表扬稿范文
2015/01/17 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
PHP使用非对称加密算法RSA
2021/04/21 PHP
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android