AI闂備浇顕х换鎰崲閹邦喗宕叉俊銈勮兌椤╃兘鏌ㄩ悤鍌涘 闂傚倷鑳堕崢褔鎮块崶顬盯宕熼姘辨焾闂佸湱鍋撳ḿ娆擃敋鏉堛劍鍙忔俊顖氭健閸濇椽鏌￠崱顓熷
闂傚倷鑳剁涵鍫曞疾濠靛绐楅幖娣妼缁犳牠鏌ㄩ悤鍌涘
闂傚倷娴囬～澶嬬娴犲绀夐煫鍥ㄦ尵閺嗭箓鏌ㄩ悤鍌涘
html5 跨文档消息传输示例探讨_HTML5教程
缂傚倸鍊搁崐椋庣矆娴ｈ娲晝閸屾氨鍔电紓浣插亾闁硅京顒CMS闂備浇宕甸崰鎰版偡閵夈儙娑樷攽鐎ｃ劉鍋撻崒鐐查唶闁哄洨鍋為悗顒€鈹戦悙鍙夘棡闁搞劎鍠栧濠氭晸閿燂拷婵犵數鍋為崹璺侯潖鐟欏嫮鐝堕柛鈩冪☉閻撴﹢鏌″搴″箺闁抽攱甯￠弻銊╂偆閸屾稑顏� 缂傚倸鍊风粈渚€藝闁秴绐楅柟閭﹀墾閼板潡鏌涢妷顔煎缂佲偓婢舵劖鐓冮柕澶堝妽閻濐亪鏌ｅ┑鎾村 闂傚倸鍊风欢锟犲磻閸曨垁鍥ㄦ綇閳哄啰顦繝銏ｆ硾閺堫剟宕楀⿰鍫熺厸闁搞儯鍔嶉惃鎴︽⒒婢跺﹦效闁哄被鍊栧ḿ蹇涘Ω閿旂粯顥涚紓鍌欑劍閸炲骞忛敓锟� 闂傚倷绀侀幖顐﹀疮閻楀牊鍙忛柟缁㈠枛濡炰粙鏌″搴′簽闁告纰嶇换娑㈠幢濡闉嶅┑顕嗙稻閸旀鍩€椤掑喚娼愰柟顔肩埣瀹曟洟鏌嗗鍛厬闂佽法鍣﹂幏锟�,闂傚倷娴囬惃顐﹀礋椤愩垹袘闂佽姘﹂～澶嬬箾婵犲偆鍤曢柛顐ｆ礀缁€鍐┿亜閺傚灝鎮戞い蹇曞枑缁绘盯骞嬮悙鏉戠殤闂佺ǹ顑嗛幑鍥ь潖閸濆嫧鏋庨柟顖嗗嫮浜梻浣告啞閻熴儳鎹㈠Ο渚殨濠电姵纰嶉弲鎼佹煥閻曞倹瀚�!
对窗口对象的message事件进行监听 复制代码 代码如下:www.mb5u.com
window.addEventListener("message", function(event) {
// 处理程序代码
}, false);
使用window对象的postMessage()方法向其他窗口发送消息，该方法的定义如下：
复制代码 代码如下:www.mb5u.com
otherwindow.postMessage(message, targetOrigin);
该方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何JavaScript对象（通过JSON转换对象为文本）；第二个参数为接收消息的对象窗口的URL地址，可以在URL地址字符串中使用通配符“*”指定全部地址，不过建议使用准确的URL地址。otherwindow为要发送窗口对象的引用，可以通过window.open()方法返回该对象，或通过对window.frames数组指定序号（index）或名字的方式来返回单个frame所属性的窗口对象。
示例
复制代码 代码如下:www.mb5u.com
<!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>
子页面中的代码如下:
复制代码 代码如下:www.mb5u.com
<!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属性，可以获取消息发送源的窗口的代理对象。
/所属分类：HTML5教程/更新时间：2013-04-22
评论加载中....相关HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
- 网易微博Web App用HTML5开发的过程介绍
- HTML5 对各个标签的定义与规定：body的介绍
- 关于HTML5的安全问题开发人员需要牢记的
- 关于HTML5的22个初级技巧(图文教程)
- 开发人员所需要知道的HTML5性能分析面面观
- HTML5 Web Database 数据库的SQL语句的使用方法
- HTML5实践-图片设置成灰度图
- HTML5安全介绍之内容安全策略（CSP）简介
- HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
- Bootstrap 学习分享
- input元素的url类型和email类型简介
- 相关链接：
- 教程说明：
HTML5教程-html5 跨文档消息传输示例探讨
。