<meta name="keywords" content="华夏棋牌,HTML5,Communication,API" />
华夏棋牌 > web前端 > H5教程 > 注释

详解HTML5中的Communication API基本应用措施_html5教程手艺

原创 2016-05-16 15:45:55 0 209
赞助会员专享特权
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; iif (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。 php中文网最新课程二维码
  • 相关标签:HTML5 Communication API
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 若何应用input事宜来监听移动端的输入_html5教程手艺
  • 深刻剖析HTML5 Canvas控制图形矩阵变换的措施_html5教程手艺
  • 实例解说应用SVG制造loading加载动画的措施_html5教程手艺
  • 实例解说应用HTML5 Canvas API操作图形改变的措施_html5教程手艺
  • 详解HTML5中的Communication API基本应用措施_html5教程手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173543)

    独孤九贱(4)_PHP视频教程

    华夏棋牌江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(169666)

    独孤九贱(1)_HTML5视频教程

    华夏棋牌《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137120)

    ThinkPHP5实战之[教授修养治理系统]

    华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130403)

    PHP入门视频教程之一周学会PHP

    一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(129771)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节