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中的跨页面消息传输的更多相关文章

  1. HTML5学习之跨文档传输消息（七）

    新标准中提供了文档之间直接的消息传输API.而且不限制跨域消息传递! 发送消息使用的是Window对象的postMessage(data,targetURL)方法就可以了,但给哪个window对象发送 ...

  2. HTML5中的跨文档消息传递

    跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p. ...

  3. 拾人牙慧篇之——基于HTML5中websocket来实现消息推送功能

    一.写在前面 要求做一个,后台发布信息,前台能即时得到通知的消息推送功能.网上搜了也有很多方式,ajax的定时询问,Comet方式,Server-Sent方式,以及websocket.表示除了定时询问 ...

  4. JS中实现跨域的方法总结

    今天早上在地铁看了点基础知识的考察题,看到了一个JS跨域的问题,仔细想了想自己脑子里竟然只剩下jsonp跨域和用nginx反向代理进行跨域,想着还有别的几种方法,就是想不起来,这个人呢,一上岁数这个脑 ...

  5. HTML5 跨文档消息传输

    对窗口对象的message事件进行监听 window.addEventListener("message", function(event) { // 处理程序代码 }, fals ...

  6. 使用HTML5中postMessage实现Ajax中的POST跨域问题

    HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...

  7. [转]html5: postMessage解决跨域和跨页面通信的问题

    [转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...

  8. 使用HTML5中postMessage 实现ajax中的POST跨域问题

    HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...

  9. HTML5中window.postMessage，在两个页面之间的数据传递

    HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览 关于postMessage window.postMessage虽然说是html5的功 ...

随机推荐

  1. 在线网络速度测试JAVA程序（一）：思路和控制台主程序【转】

    来源:http://hancool.blog.51cto.com/1836252/1352228 事情的缘由 因上级公司的信息化主管部门经常被投诉说是各种业务应用系统反映系统使用慢的问题,而都把问题归 ...

  2. OpenJudge计算概论-与7无关的数

    /*========================================================== 与7无关的数 总时间限制: 1000ms 内存限制: 65536kB 描述 一 ...

  3. Transact-SQL 学习小结

    1.把系统里所有用全局临时表的改成局部临时表,不然并发高时会引发对象已经存在的问题,不要用##要用#. 2.int 不能写成 id = '1',比如Select * from A where ID=' ...

  4. 目录处理工具类 DealWithDir.java

    package com.util; import java.io.File; /** * 目录处理工具类 * */ public class DealWithDir { /** * 新建目录 */ p ...

  5. eclipse中tomcat加gc日志输出

    -XX:ParallelGCThreads=4 -XX:+PrintGCDetails

  6. [oracle] 设置PL/SQL Developer 字符集

    我安装的是PLSQL Developer(10)执行SQL发现弹出的错误提示对话框都是??表示,显示不出正确的提示信息.后来才明白是跟服务器的字符集不匹配的问题.方法如下:1.查询oracle ser ...

  7. Angular学习（2）- ng-app

    此例子看alert弹出时的效果.当然,最重要的是ng-app="MyApp",这一个是怎么加载的. <!DOCTYPE html> <html ng-app=&q ...

  8. AngularJs初步学习笔记（part1）

    一.摘要: angular是采用JavaScript编写的前端mvc框架,帮助开发者编写现代化的单页面应用.它尤其适用编写有大量CRUD操作的,具有Ajax风格的客户端应用. 二.总结: Angula ...

  9. Windows蓝屏后产生的.dmp分析原因

    Windows系统电脑出现蓝屏后都会自动重启,重启后电脑屏幕会提示蓝屏的相关信息,此时如果你没有来得及查看,你也可以进入windows7的“事件查看器”(位置为:控制面板--系统和安全--管理工具-- ...

  10. Python处理Excel文档（xlrd, xlwt, xlutils）

    简介 xlrd,xlwt和xlutils是用Python处理Excel文档(*.xls)的高效率工具.其中,xlrd只能读取xls,xlwt只能新建xls(不可以修改),xlutils能将xlrd.B ...