HTML5的Message

Message API最大的优势是跨域发送消息。关于Message更多的信息请参考:

http://www.w3.org/TR/html5/comms.html#dom-messageevent-initmessageevent

https://developer.mozilla.org/en/DOM/window.postMessage

Message中一般常用的属性:

1、data 包含传入的消息,一般以会将传递的数据转化为字符串;

2、origin 返回消息来自的域,可以根据它来判断是否要处理消息,是非常基本的层级上的策略控制

3、source   相当于window.opener,这样就可以实现基本的消息互通了

这里有两个页面:index.html、postMessageTarget.html,位于同级目录(当然这两个文件可以放在不同的域中)

最终运行的实例效果如下图所示:

点击“postMessage”向iframe发出消息,iframe获取消息进行处理并回调父层文档对象的一个方法,详见代码。

index.html

<!DOCTYPE html>
<html>
 <head>
  <title>postMessageTarget</title>
  <meta charset="utf-8"> 
 <style> 
    * { margin: 0; padding: 0; font-size: 20px; }

    iframe {
        width: 610px;
        height: 300px;
        margin: 20px auto;
        border: 1px solid #000;
    }
    
    p { font-family: monospace; font-weight: bold; background: #A9A9A8; color: #fff; text-shadow: 1px 1px 0 #000; padding: 5px; height: 24px;}

    #my_message { font-family: monospace; width: 600px; font-weight: bold; height: 24px; border: 0; padding: 5px; outline: 0; background: #eee; -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,.3); }

    #submit_btn {background:#eee; outline:none; border-width:1px; height:34px; -webkit-border-radius:4px; font-size:14px; padding:0 5px; cursor:pointer;}
</style>
<!--[if lte IE 8]>
    <script src="http://files.cnblogs.com/meteoric_cry/html5.js"></script>
<![endif]-->   1:     2:  </head>   3:     4:  <body>   5:      6: <form id="the_form" action="/">    7:     <p>关于HTML5 Message的测试例子</p>   8:     <input type="text" id="my_message" value="Your message">    9:     <input type="submit" value="postMessage" id="submit_btn">   10: </form>  11: <iframe id="the_iframe" src="postMessageTarget.html"></iframe>   12:    13: <script type='text/javascript'>  14: window.onload = function () {  15:     var iframeWin = document.getElementById("the_iframe").contentWindow,  16:         form = document.getElementById("the_form"),  17:         myMessage = document.getElementById("my_message");  18:    19:     myMessage.select();      20:    21:     form.onsubmit = function () {  22:         iframeWin.postMessage(myMessage.value, "http://meteoric.com");  23:         return false;  24:     };  25: };  26:    27: function callback(str) {  28:     alert('callback:' + str);  29: }  30:  </script>

 </body>
</html>

postMessageTarget.html

<!DOCTYPE html>
<html>
 <head>
  <title>postMessageTarget</title>
  <meta charset="utf-8"> 
  <style> 
    body {
        background: #fff;
    }
</style> 
 </head>

 <body>
<script>   1:     2: function displayMessage (evt) {   3:     var message;   4:        5:     if (evt.origin !== "http://meteoric.com") {   6:         message = "当前提交数据被禁止!来源非法";   7:     } else {   8:         message = "获取的数据:\"" + evt.data + "\"  来源:" + evt.origin;   9:     }  10:       11:     document.getElementById("received_message").innerHTML = message;  12:    13:     evt.source.window.callback("change title");  14: }  15:    16: // For standards-compliant web browsers  17: if (window.addEventListener) {  18:     window.addEventListener("message", displayMessage, false);  19: }  20: else {  21:     window.attachEvent("onmessage", displayMessage);  22: }</script> 

<p id="received_message">准备就绪,等待接受数据</p> 
 </body>
</html>

有一点需要注意的是:

postMessage的目标源文档必须填写(即第二个参数,第一个参数则提交的数据),它必须与iframe对象的所在的域匹配,如果不匹配将会抛出一个安全性错误,阻止脚本继续执行。

如果目标源没有传入,JavaScript将出抛出一个错误。

上面的示例中仅仅是发送了字符串,如果需要发送非字符串数据,比如一个json对象。规范说明了当浏览器必须安全从一个域向另一个域发送数据时,会发生什么。

它说明了如何克隆,以及应该如何对待该数据。

但很遗憾,大多数浏览器是不支持,实际上,大多数浏览器只是把对象强制转转为一个字符串。这时候可以使用JSON.stringify和JSON.parse来处理了。

发送数据时,使用JSON.stringify把JSON对象转为字符串,在接收端使用JSON.parse将字符串转换为JSON对象。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏nummy

使用jsTree树形控件【2】配置

上一节入门篇中的例子使用了jsTree控件的默认配置,其实我们也可以自定义配置。例如,下面的代码修改控件的主题:

1143
来自专栏mySoul

node Express 框架

Express事实上Node内置的http模块上构建的一层抽象。理论上所有Express实现的功能都能用Node实现

1652
来自专栏酷玩时刻

微信公众号开发之如何使用JSSDK

使用JSSDK主要包括 1、判断当前客户端版本是否支持指定JS接口、 2、分享接口(微信认证) 3、图像接口 4、音频接口 5、智能接口(识别语音并返...

4273
来自专栏Alice

cocos2d-x_下载游戏引擎并创建第一个项目

拖进命令行点击回车键 ,在安装的时候有三个选择路径的,因为我做的是ios开发所有全部就是直接点了回车。

2043
来自专栏青玉伏案

iOS开发之App主题切换完整解决方案(Swift版)

本篇博客就来介绍一下iOS App中主题切换的常规做法,当然本篇博客中只是提到了一种主题切换的方法,当然还有其他方法,在此就不做过多赘述了。本篇博客中所涉及的D...

24410
来自专栏运维小白

5.5 进入编辑模式

编辑模式:就是进入到可以编辑文本文件的模式 ? 进入编辑模式方法: i ,直接在当前光标处进入编辑模式 I (大写I),光标直接移动到该行的行首,并进入编辑...

1947
来自专栏飞雪无情的博客

Go语言中间件框架 Negroni 的静态文件处理源码分析

Negroni是一个非常棒的中间件,尤其是其中间件调用链优雅的设计,以及对GO HTTP 原生处理器的兼容。我以前写过两篇文章,对Negroni进行了专门的分析...

1123
来自专栏黑泽君的专栏

vi/vim命令复习和练习

741
来自专栏超然的博客

前端必知的ajax

1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。

1504
来自专栏技术之路

【swift学习笔记】二.页面转跳数据回传

上一篇我们介绍了页面转跳:【swift学习笔记】一.页面转跳的条件判断和传值 这一篇说一下如何把数据回传回父页面,如下图所示,这个例子很简单,只是把传过去的数据...

2158

扫码关注云+社区

领取腾讯云代金券