Html5中的跨页面消息传输
2015-12-09 22:31
821 查看
1.如果要接受从其他的窗口那里发过来的消息,就必须对窗口对象的message事件进行监控.
window.addEventListener("message",function(){},false);
使用window对象的postMessage方法向其他窗口发送消息,
otherwindow.postMessage(message,targetOrigin);
参数:message为所发送的消息文本,但也可以是任何javascript对象;
第二个参数为接受消息的对象窗口的URL地址.
otherWindow为要发送窗口对象的引用,可以通过window.open返回该对象,或通过对window.frames数组制定序号或名字的方式来返回单个frame所属的窗口对象.
新建二个项目:s1,s2
s1和s2相互发送数据:
s1 中的index.html:
s2 中的1.html
结果:
![](http://images2015.cnblogs.com/blog/446425/201512/446425-20151209222032340-1792063471.png)
origin属性:这个是发送元,发送元与网站的url地址不是同一概念,发送原只包括域名与端口号,
为了不接收从其他源恶意发送过来的消息,最好对发送源做个检查.
source属性:可以获取消息发送的窗口对象.
这里所说的网页文档与网页文档之间的消息传送,针对的不仅仅是文本消息,
如果使用Json对象stringify方法将javascript对象转成文本,使用Json对象的parse方法
将文本还原问javascript对象,则任何javascript对象都可以通过这种方式在网页文档与文档之间,端口与端口之间,域与域之间相互传递.
window.addEventListener("message",function(){},false);
使用window对象的postMessage方法向其他窗口发送消息,
otherwindow.postMessage(message,targetOrigin);
参数:message为所发送的消息文本,但也可以是任何javascript对象;
第二个参数为接受消息的对象窗口的URL地址.
otherWindow为要发送窗口对象的引用,可以通过window.open返回该对象,或通过对window.frames数组制定序号或名字的方式来返回单个frame所属的窗口对象.
新建二个项目:s1,s2
s1和s2相互发送数据:
s1 中的index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.addEventListener("message",function(ev){ document.getElementById("content").innerHTML=ev.origin+">>>"+ev.data; },false); function hello(){ var iframe=window.frames[0]; iframe.postMessage("思思博士","http://127.0.0.1:8020/s2/1.html"); } </script> </head> <body> <divn id="content"></divn> <iframe src="http://127.0.0.1:8020/s2/1.html" width="100%" height="100" frameborder="2" onload="hello()"></iframe> </body> </html>
s2 中的1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.addEventListener("message",function(ev){ document.getElementById("h1cotent").innerHTML="从"+ev.origin+"那里传来的消息. "+ev.data; ev.source.postMessage("你好,习大大",ev.origin); },false); </script> </head> <body> <h1 id="h1cotent"></h1> </body> </html>
结果:
![](http://images2015.cnblogs.com/blog/446425/201512/446425-20151209222032340-1792063471.png)
origin属性:这个是发送元,发送元与网站的url地址不是同一概念,发送原只包括域名与端口号,
为了不接收从其他源恶意发送过来的消息,最好对发送源做个检查.
source属性:可以获取消息发送的窗口对象.
这里所说的网页文档与网页文档之间的消息传送,针对的不仅仅是文本消息,
如果使用Json对象stringify方法将javascript对象转成文本,使用Json对象的parse方法
将文本还原问javascript对象,则任何javascript对象都可以通过这种方式在网页文档与文档之间,端口与端口之间,域与域之间相互传递.
相关文章推荐
- 用html5 Canvas制作一个简单的游戏 英雄抓小怪物(上)
- HTML5之File文件操作
- html5监听屏幕旋转
- HTML5动画/游戏神器---AlloyStick
- 巧用Html5 History Api解决SPA的SEO问题
- HTML5之一——新标签
- HTML5离线应用与客户端存储
- h5与原生代码交互
- 打造H5动感影集的爱恨情仇–动画性能篇
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
- HTML5之废弃和更新的元素与属性
- 实例讲解HTML5的meta标签的一些应用
- html5学习:轮播图
- HTML5 本地存储 LocalStorage
- 推荐10款非常优秀的HTML5开发工具
- HTML4和HTML5之间的10个主要不同的地方
- HTML5 特性检测:Canvas Text
- HTML5中对script标签的规定与解释
- HTML5中元素事件大全
- HTML5中元素属性