音效素材网提供各类素材,打造精品素材网站!

站内导航 站长工具 投稿中心 手机访问

音效素材

详解HTML5中的Communication API基本使用方法
日期:2021-09-05 20:47:53   来源:脚本之家

1.跨文档消息通信
跨文档消息通信可以确保iframe、标签页、窗口间安全地进行跨源通信。它把postMessage API定义为发送消息的标准方式。利用postMessage发送消息非常简单,代码如下所示:
chatFrame.contextWindow.postMessage('Hello,world','http://www.example.com');
接收消息时仅需在页面种增加一个事件处理函数。当某个消息到达时,通过检查消息的来源来决定是否对这条消息进行处理。
消息事件是一个拥有data(数据)和origin(源)属性的DOM事件。data属性是发送方传递的实际消息,而origin属性是发送来源。
postMessage API不仅可以胜任同源文档间的通信,而且在浏览器不允许非同源通信的情况下,postMessage API也很有用。鉴于它的一致性和易用性,在同源文档间通信时也推荐使用postMessage。在JavaScript环境的通信中始终应使用postMessage API,例如使用HTML5 Web Worker通信时。
1.1 理解源安全
HTML5荣光引入源(origin)的概念对域安全进行了阐明和改进。源是在网络上用来建立信任关系的地址的子集。源由规则(scheme)、主机(host)、端口(post)组成。
源的概念中不考虑路径。
HTML5定义了源的序列化。源在API和协议中以字符串的形式出现。
postMessage的安全规则确保了消息不会被传递到非预期的源页面中。当发送消息时,由发送方制定接收方的源。如果发送方用来调用postMessage的窗口不具有特定的源(例如用户跳转到了其他站点),浏览器就不会传送消息。
类似地,接受消息的时候,发送方的源也被作为消息的一部分。为避免伪造,消息源由浏览器提供。接收方可以决定处理哪些消息,以及忽略哪些消息。我们可以保留一份白名单,告诉浏览器仅仅处理可信源的消息。
最好永远不要对来自第三方的字符串求值。再者,要避免使用eval方法处理应用内部字符串。可以通过window.JSON或者json,.org解析器使用JSON。
1.2 跨文档消息通信的浏览器支持情况
常用的做法是检测XMLHttpRequest对象中是否存在withCredentials属性:
JavaScript Code复制内容到剪贴板
  1.   var xhr = new XMLHttpRequest(); if (typeof xhr.withCredentials === undefined) { //不支持跨源的XMLHttpRequest } else { //支持跨源的XMLHttpRequest }  
1.3 使用postMessage API
提示 HTML5定义的MessageEvent接口也是HTML5 WebSockets和HTML5 WebWorkers的一部分。HTML5的通信功能用用于接受消息的API与MessageEvent接口是一致的。其他通信类API,如EventSource API和Web Workers,也都是使用MessageEvent接口来传递消息。
1.4 使用postMessage API创建应用
发送消息
  通过调用目标页面window对象中的postMessage()函数可发送消息,代码如下:
  
JavaScript Code复制内容到剪贴板
  1. window.postMessage("Hello, world""porta");  
  第一个参数包括要发送的数据,第二个参数是消息传送的目的地。要发送消息给iframe,可以再相应iframe的contentWindow中调用postMessage,代码如下:
  
JavaScript Code复制内容到剪贴板
  1. document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, world""cha");  
监听消息事件
  接收消息时仅需在页面中增加一个事件处理函数。当某个消息到达时,通过检查消息的来源来决定是否对这条消息进行处理。
  
JavaScript Code复制内容到剪贴板
  1. window.postMessage("Hello, world""porta");  
  消息事件是一个拥有data(数据)和origin(源)属性的DOM事件。data属性是发送方传递的实际消息,而origin属性是发送来源。
  源由规则(scheme)、主机(host)、端口(port)组成。
  例如:由于规则不同(如https与http),所以页面与页面的源是不同的。
  源的概念中不考虑路径。如:与只是路径不同,他们是相同的源。
  源在API和协议中以字符串的形式出现。
  
JavaScript Code复制内容到剪贴板
  1. var originWhiteList = ["porta""game"""]; function checkWhiteList(origin) { for (var i=0; i<originWhiteList.length; i++) { if (origin === originWhiteList[i]) { return true; } } return false; } function messageHandler(e) { if (checkWhiteList(e.origin)) { processMessage(e.data); } else { //忽略来自未知源的消息 } }  
  postMessage API可以适用于同源和非同源通信,鉴于它的一致性,在同源文档间通信时也推荐适用postMessage。
2 XMLHttpRequest Level2
作为XMLHttpRequest的改进版,XMLHttpRequest Level2在功能上有了很大的改进。主要集中在两个方面:
(1)跨源XMLHttpRequests;
(2)进度事件(Progress events)
2.1 跨源XMLHttpRequst
XMLHttpRequestLevel2通过CORS(Cross Origin Resource Sharing,跨源资源共享)实现了跨源XMLHttpRequests。
跨源HTTP请求包括一个Origin头部,拓为服务器提供HTTP请求的源信息。头部由浏览器保护,不能被应用程序代码修改。从本质上讲,它与跨文档消息通信中消息事件的origin属性作用相同。
CORS规范要求,对一些敏感行为——如申请证书的请求或除了GET和POST以外的OPTIONS预检(preflight)请求,必须由浏览器发送给服务器,以确定这种行为能否被支持和允许,这意味着成功通信的背后或许需要由具备CORS出了能力的服务器来支持。
2.2 进度事件
新版XMLHttpRequest中最重要的API改进之一是增加了对进度的响应。
XMLHttpRequest Level2用了一个有意义的名字Progress进度来命名进度事件。
3 进阶功能
3.1 结构化的数据
早期版本的postMessage仅支持字符串。后来的版本支持JavaScript对象、canvas imageData和文件等其他数据类型。由于不同浏览器对规范支持的差异,对不同的对象类型的支持情况也不同。
3.2 Framebusting
Framebusting技术可以用来保证某些内容不被加载到jframe中。应用程序首先检测其所在的窗口是否为最外层的窗口(window.top),若不是则跳脱包含它的框架,代码如下所示:
JavaScript Code复制内容到剪贴板
  1. if(window!=window.top)   
  2. {   
  3. window.top.location=location;   
  4. }  
3.3二进制数据
  支持新的二进制API(如Typed Array)的浏览器可以用XMLHttpRequest来发送二进制数据。Level 2规范支持调用send()方法发送Blob和ArrayBuffer对象
  
XML/HTML Code复制内容到剪贴板
  1. var a = new Uint8Array([8,6,7,5,3,0,9]); var xhr = new XMLHttpRequest(); xhr.open("POST", "/data/", true); console.log(a); xhr.send(a.buffer);  
  XMLHttpRequest Level 2也会公开二进制响应数据。将responseType属性值设置为text、document、arraybuffer或blob来控制 有response属性返回的对象类型。如果想要查看HTTP响应体包含的原始字节,需要将responseTyper属性值设为arraybuffer或blob。

    您感兴趣的教程

    在docker中安装mysql详解

    本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...

    详解 安装 docker mysql

    win10中文输入法仅在桌面显示怎么办?

    win10中文输入法仅在桌面显示怎么办?

    win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...

    win10 中文输入法

    一分钟掌握linux系统目录结构

    这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...

    结构 目录 系统 linux

    PHP程序员玩转Linux系列 Linux和Windows安装

    这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...

    玩转 程序员 安装 系列 PHP

    win10怎么安装杜比音效Doby V4.1 win10安装杜

    第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...

    win10杜比音效

    纯CSS实现iOS风格打开关闭选择框功能

    这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...

    css ios c

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的

    Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...

    Win7 C盘 扩容

    百度推广竞品词的投放策略

    SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...

    百度推广 竞品词

    Visual Studio Code(vscode) git的使用教程

    这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...

    教程 Studio Visual Code git

    七牛云储存创始人分享七牛的创立故事与

    这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...

    七牛 Go语言

    Win10预览版Mobile 10547即将发布 9月19日上午

    微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...

    Win10 预览版

    HTML标签meta总结,HTML5 head meta 属性整理

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...

    移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...

    移动端 html5 长按

    HTML常用meta大全(推荐)

    这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    cdr怎么把图片转换成位图? cdr图片转换为位图的教程

    cdr怎么把图片转换成位图? cdr图片转换为

    cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...

    cdr 图片 位图

    win10系统怎么录屏?win10系统自带录屏详细教程

    win10系统怎么录屏?win10系统自带录屏详细

    当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...

    win10 系统自带录屏 详细教程

    + 更多教程 +
    HTMLCSSDreamweaverFrontpage