html5+ 的api怎么用

Question

html5+ 的api怎么用

Answer 1

1.1 理解源安全HTML5荣光引入源（origin）的概念对域安全进行了阐明和改进。源是在网络上用来建立信任关系的地址的子集。源由规则（scheme）、主机（host）、端口（post）组成。源的概念中不考虑路径。HTML5定义了源的序列化。源在API和协议中以字符串的形式出现。postMessage的安全规则确保了消息不会被传递到非预期的源页面中。当发送消息时，由发送方制定接收方的源。如果发送方用来调用postMessage的窗口不具有特定的源（例如用户跳转到了其他站点），浏览器就不会传送消息。类似地，接受消息的时候，发送方的源也被作为消息的一部分。为避免伪造，消息源由浏览器提供。接收方可以决定处理哪些消息，以及忽略哪些消息。我们可以保留一份白名单，告诉浏览器仅仅处理可信源的消息。最好永远不要对来自第三方的字符串求值。再者，要避免使用eval方法处理应用内部字符串。可以通过window.JSON或者json,.org解析器使用JSON。1.2 跨文档消息通信的浏览器支持情况常用的做法是检测XMLHttpRequest对象中是否存在withCredentials属性：JavaScript Code复制内容到剪贴板var&nbsp;xhr&nbsp;=&nbsp;new&nbsp;XMLHttpRequest();&nbsp;if&nbsp;(typeof&nbsp;xhr.withCredentials&nbsp;===&nbsp;undefined)&nbsp;{&nbsp;//不支持跨源的XMLHttpRequest&nbsp;}&nbsp;else&nbsp;{&nbsp;//支持跨源的XMLHttpRequest&nbsp;}&nbsp;&nbsp;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,&nbsp;world",&nbsp;"porta");&nbsp;&nbsp;　　第一个参数包括要发送的数据，第二个参数是消息传送的目的地。要发送消息给iframe，可以再相应iframe的contentWindow中调用postMessage，代码如下：JavaScript Code复制内容到剪贴板document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello,&nbsp;world",&nbsp;"cha");&nbsp;&nbsp;监听消息事件　　接收消息时仅需在页面中增加一个事件处理函数。当某个消息到达时，通过检查消息的来源来决定是否对这条消息进行处理。JavaScript Code复制内容到剪贴板window.postMessage("Hello,&nbsp;world",&nbsp;"porta");&nbsp;&nbsp;　　消息事件是一个拥有data（数据）和origin（源）属性的DOM事件。data属性是发送方传递的实际消息，而origin属性是发送来源。　　源由规则（scheme）、主机（host）、端口（port）组成。　　例如：由于规则不同（如https与http），所以页面与页面的源是不同的。　　源的概念中不考虑路径。如：与只是路径不同，他们是相同的源。　　源在API和协议中以字符串的形式出现。JavaScript Code复制内容到剪贴板var&nbsp;originWhiteList&nbsp;=&nbsp;["porta",&nbsp;"game",&nbsp;""];&nbsp;function&nbsp;checkWhiteList(origin)&nbsp;{&nbsp;for&nbsp;(var&nbsp;i=0;&nbsp;i<originWhiteList.length;&nbsp;i++)&nbsp;{&nbsp;if&nbsp;(origin&nbsp;===&nbsp;originWhiteList[i])&nbsp;{&nbsp;return&nbsp;true;&nbsp;}&nbsp;}&nbsp;return&nbsp;false;&nbsp;}&nbsp;function&nbsp;messageHandler(e)&nbsp;{&nbsp;if&nbsp;(checkWhiteList(e.origin))&nbsp;{&nbsp;processMessage(e.data);&nbsp;}&nbsp;else&nbsp;{&nbsp;//忽略来自未知源的消息&nbsp;}&nbsp;}&nbsp;&nbsp;　　postMessage API可以适用于同源和非同源通信，鉴于它的一致性，在同源文档间通信时也推荐适用postMessage。2 XMLHttpRequest Level2作为XMLHttpRequest的改进版，XMLHttpRequest Level2在功能上有了很大的改进。主要集中在两个方面：（1）跨源XMLHttpRequests;（2）进度事件（Progress events）