码迷,mamicode.com
首页 > Web开发 > 详细

Html5中的跨页面消息传输

时间:2015-12-09 23:26:20      阅读:369      评论:0      收藏:0      [点我收藏+]

标签:

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:

<!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>

结果:

技术分享

origin属性:这个是发送元,发送元与网站的url地址不是同一概念,发送原只包括域名与端口号,

为了不接收从其他源恶意发送过来的消息,最好对发送源做个检查.

source属性:可以获取消息发送的窗口对象.

 

这里所说的网页文档与网页文档之间的消息传送,针对的不仅仅是文本消息,

如果使用Json对象stringify方法将javascript对象转成文本,使用Json对象的parse方法

将文本还原问javascript对象,则任何javascript对象都可以通过这种方式在网页文档与文档之间,端口与端口之间,域与域之间相互传递.

 

Html5中的跨页面消息传输

标签:

原文地址:http://www.cnblogs.com/guoyansi19900907/p/5034523.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!