HTML5权威指南 11.通信API

1 <!DOCTYPE html>
2 <html>
3
4 <head>
5     <metacharset="UTF-8">
6     <title></title>
7     <scripttype="text/javascript">
8         //（1）监听message事件
9 window.addEventListener("message",function(ev){10             //（2）忽略指定URL地址之外的页面传过来的消息
11             if(eb.origin!="http://www.baidu.com"){12                 return;13 }14             //（3）显示消息
15 alert("从"+ev.origin+"那里传过来的消息:\n\""+ev.data+"\"");16 },false);17         functionhello(){18             variframe=window.frames[0];19             //（4）传递消息
20 iframe.postMessage("你好","http://wwww.baidu.com");21 }22     </script>
23 </head>
24 <body>
25     <h1>跨域通信示例</h1>
26     <iframesrc="http://www.baidu.com"frameborder="0"width="400"onload="hello()"></iframe>
27 </body>
28 </html>

1 <!DOCTYPE html>
2 <html>
3
4 <head>
5     <metacharset="UTF-8">
6     <title></title>
7     <scripttype="text/javascript">
8 window.addEventListener("message",function(ev){9             if(ev.origin!="http://"){10                 return;11 }12 document.body.innerHTML="从"+ev.origin+"那里传来的消息。<br>\""+ev.data+"\"";13             //(5)向主页面发出消息
14 ev.source.postMessage("您好。这里是"+this.location,ev.origin);15 },false);16     </script>
17 </head>
18 <body>
19
20 </body>
21 </html>

1 <!DOCTYPE html>
2 <html>
3
4 <head>
5     <metacharset="UTF-8">
6     <title></title>
7     <scripttype="text/javascript">
8         functionwindow_onload() {9             varmc, postMessageHandler;10 mc= newMessageChannel();11
12             //向父页面发送端口及消息
13 window.parent.postMessage("子页面1已加载完毕","http://localhost/test.html", [mc.port2]);14
15             //定义本页面中端口接收到消息时的事件处理函数中的内容
16 portMessageHandler= function(portMsgEvent) {17 alert(portMsgEvent.data);18 }19
20             //定义本页面中端口接收到的消息时的事件处理函数
21 mc.port1.addEventListener("message", portMessageHandler,false);22
23             //打开本页面中的端口，开始监听
24 mc.port1.start();25 }26     </script>
27 </head>
28
29 <bodyonload="window_onload();">
30
31 </body>
32
33 </html>

转载于:https://www.cnblogs.com/wingzw/p/7446166.html

HTML5权威指南 11.通信API相关推荐

HTML5权威指南----读书笔记
<!DOCTYPE html> <html> <head><meta name = 'keywords' content="HTML5权威指南--- ...
HTML5 权威指南第 10 章文档分节学习笔记
HTML5 权威指南第 10 章文档分节学习笔记第 8 章标记文字内容从从文字出发,专注如何将单体内容正确的呈现出来:第 9 章组织内容内容从段落出发,专注如何将单体内容合理的放在段落中 ...
HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)...
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是coo ...
HTML5权威指南观后笔记
目录 1.HTML5背景知识 2.准备工作 3.初探HTML 4.初探CSS 5.初探JavaScript 6.HTML元素背景知识 7.创建HTML文档 8.标记文字 9.组织内容 10.文档分节 ...
hbase 客户端_读《HBase权威指南》客户端API：基础知识
HBase 的主要客户端接口是由 org.apache.hadoop.hbase.client 包中的 HTable 类提供的. 创建 HTable 实例是有代价的.每个实例都需要扫描 .META. ...
HTML5权威指南读书笔记03（第7，8章）--icon，base，锚点，一些七七八八的元素
1.使用ico图标如果标志文件位于服务器/favicon.ico(服务器根目录,则不需要link),浏览器自动匹配该文件 <link rel="shortcut icon" ...
小白的《HTML5权威指南》笔记（第一部分）
第一章基本了解HTML5 什么是HTML5? HTML5是一种标准,负责制定HTML标准的是W3C(World Wide Web Consortium,万维网联盟). HTML5不仅仅是HTML规范 ...
html5权威指南预读,《HTML5权威指南》
Hibernate关联关系的映射实体之间的关系实体之间有三种关系一对多:一个用户,生成多个订单,每一个订单只能属于一个用户建表原则:在多的一方创建一个字段,作为外键,指向一的一方的主键多对多 ...
HTML5权威指南读书笔记12（第21章）--创建布局postion，z-index，column-count，display：flex，box-flex、algin、pack，table
1.概述 2.定位内容的位置 <head><style type="text/css">div{ p ...

HTML5权威指南 11.通信API

HTML5权威指南 11.通信API相关推荐

最新文章

热门文章