• 售前

  • 售后

热门帖子
入门百科

详解HTML5中的Communication API基本使用方法

[复制链接]
auqsio7413820 显示全部楼层 发表于 2021-10-26 13:37:30 |阅读模式 打印 上一主题 下一主题
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复制内容到剪贴板
       
  •   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复制内容到剪贴板
       
  • window.postMessage("Hello, world", "porta");  
  第一个参数包括要发送的数据,第二个参数是消息传送的目的地。要发送消息给iframe,可以再相应iframe的contentWindow中调用postMessage,代码如下:
  JavaScript Code复制内容到剪贴板
       
  • document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, world", "cha");  
监听消息事件
  吸取消息时仅需在页面中增长一个事件处理函数。当某个消息到达时,通过查抄消息的泉源来决定是否对这条消息进行处理。
  JavaScript Code复制内容到剪贴板
       
  • window.postMessage("Hello, world", "porta");  
  消息事件是一个拥有data(数据)和origin(源)属性的DOM事件。data属性是发送方传递的实际消息,而origin属性是发送泉源。
  源由规则(scheme)、主机(host)、端口(port)组成。
  比方:由于规则差别(如https与http),所以页面与页面的源是差别的。
  源的概念中不思量路径。如:与只是路径差别,他们是雷同的源。
  源在API和协议中以字符串的情势出现。
  JavaScript Code复制内容到剪贴板
       
  • var originWhiteList = ["porta", "game", ""]; function checkWhiteList(origin) { for (var i=0; i<originWhiteList.length; i++) { if (origin === originWhiteList) { 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复制内容到剪贴板
       
  • if(window!=window.top)      
  • {      
  • window.top.location=location;      
  • }  
3.3二进制数据
  支持新的二进制API(如Typed Array)的浏览器可以用XMLHttpRequest来发送二进制数据。Level 2规范支持调用send()方法发送Blob和ArrayBuffer对象
  XML/HTML Code复制内容到剪贴板
       
  • 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。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作