jluemmmm
jluemmmm

HTML5脚本编程

HTML5定义了一些新的标记规则，也定义了一些新的JavaScript API，能够让开发人员创建出更好的用户界面。

  • 跨文档消息API 能够在不降低同源策略安全性的前提下，在不同域间的文档间传递消息
  • 原生拖放功能可以指定某个元素可拖动，并在操作系统要放置时做出响应，可以创建可拖动元素及放置目标
  • 媒体元素 和拥有自己与音频和视频交互的API，使用canPlayType()检查浏览器是否支持特定格式
  • 历史状态管理可以在不必卸载当前页面时修改浏览器的历史状态栈，在这种机制下，用户可以通过后退和前进按钮在页面状态间切换，这些状态完全由JavaScript控制
1. 跨文档消息传送

window.postMessage() 方法可以安全地实现跨源通信，通常对于两个不同页面的脚本，只有当执行他们的页面位于相同的协议 (通常为https)，端口号 (443 为https)，以及主机名，两个脚本之间能够相互通信。window.postMessage()方法提供了一种受控机制来规避此限制，只要正确使用，这种方法就很安全。

otherWindow.postMessage(message, targetOrigin, [transfer])

  • otherWindow其它窗口的一个引用，比如iframe 的contentWidow属性，执行 window.open 返回的窗口对象，或是命名过或数值索引的 window.frames

  • message 将要发送到其它 window 的数据，将会被结构化克隆算法序列化，可以不受限制地将数据对象安全地传送给窗口而无需自己序列化

  • targetOrigin 通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，设置为*时，能够把消息发送给来自任何域的文档

  • 一串和message同时传递的Transferable对象，这些对象的所有权将被转移给消息的接收方

window.postMessage() 方法被调用时，会在所有页面脚本执行完毕后，向目标窗口派发一个messageEvent消息，data属性为window.postMessage的第一个参数，origin为调用postMessage时消息发送方窗口的origin，source为对发送消息的窗口的引用

跨文档消息传送，简称为 XDM，指的是在不同域的页面间传递消息，使用postMessage() 方法，实现一个页面向包含在当前页面中的