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,js)
Dec 12 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
CSS3 绘制BMW logo实的现代码
Apr 25 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 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保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
php静态文件生成类实例分析
2015/01/03 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
python实现按关键字筛选日志文件
2019/12/24 Python
python 读取串口数据的示例
2020/11/09 Python
北大研究生linux应用求职信
2013/10/29 职场文书
信息部岗位职责
2013/11/12 职场文书
4s客服专员岗位职责
2013/12/01 职场文书
综治宣传月活动总结
2014/04/28 职场文书
2014年施工员工作总结
2014/11/18 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
Python Matplotlib库实现画局部图
2021/11/17 Python