HTML5程序设计-Web通信.pdfVIP

HTML5基础教程（第2版） 授课教师： 职务： 第9章 Web通信 课程描述 HTML5 提供了功能 强大的Web通信机制， 可以实现不同域的 Web应用程序之间的 安全通信，也可以 在JavaScript进行 HTTP(S)通信和 WebSocket 通信。 这些都是构建桌面 式Web应用的基础。 本章知识点 9.1 跨文档消息机制 9.2 XMLHttpRequest Level 2 9.3 WebSocket 9.1 跨文档消息机制 p 9.1.1 检测浏览器对跨文档消息机制 的支持情况 p 9.1.2 使用postMessage API发送消息 p 9.1.3 监听和处理消息事件 9.1.1 检测浏览器对跨文档消息机制的支持情况 在JavaScript中可以使用 window.postMessage属性检测浏览器对 跨文档消息机制的支持情况。如果typeof window.postMessage等 undefined， 则表明当前浏览器不支持跨文档消息机 制；否则表明支持。 【例9-1】 p 在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持跨文档消 息机制。定义按钮的代码如下： p button id=check onclick=check();检测浏览器是否支 持跨文档消息机制/button p 单击按钮check将调用check()函数。check()函数的定义代码如下： script type=text/javascript function check() if(typeof window.postMessage == undefined) alert(您的浏览器不支持跨文档消息机制。); } else alert(您的浏览器支持跨文档消息机制。); } } /script 各主流浏览器对跨文档消息机制的支持情况 浏 览 器 对跨文档消息机制的支持情况 Chrome 2.0及以后的版本支持 Firefox 3.0及以后的版本支持 Internet 8.0及以后的版本支持 Explore Opera 9.6及以后的版本支持 Safari 4.0及以后的版本支持 9.1.2 使用postMessage API发送消息 pwindows.postMessage(data,url) p参数说明如下： p data，发送消息中包含的数据，通常是一个 字符串。 p url，指定允许通信的域名。注意，不是接 受消息的目标域名。使用该参数的主要作用是 出于安全的考虑，接受消息的窗口可以根据次 参数判断消息是否来自可信任的来源，以避免 恶意攻击。如果不对访问的域进行判断，则可 以使用*。 10.1.2 HTML5本地存储技术概述 1．localstorage 2．sessionstorage 3．web SQL数据库 4．IndexedDB 向父窗口发送消息可以使用window.parent. postMessage() p如果页面中包含两个框架，则可以使用下 面的代码向第2个框架中发送消息 window.parent.frames[1].postM essage(message, *); 【例9-2】 演示跨框架发送消息。定义框架的代码如下： html head meta HTTP-EQUIV=Content-Type CONTENT=text/html; charset=gb2312 title演示跨框架发送消息/title /hea