其中在上一章节的文章内容当中,讲到了对应的Canvas绘图
其中主要的内容就是:
- 使用canvas
- 使用getContext获取2D上下文
- 关于WebGL的使用
- 针对canvas的3D上下文
- WebGL并非W3C制定的标准,而是由Khronos Group制定的!
那么回归正题,对应的HTML5脚本编程如下所示:
01|跨文档消息传递
window.onload = ()=>{
let frameWindow = document.querySelector("#frame").contentWindow;
//向frame发送消息 并且指定对应的地址 两个参数必填
frameWindow.postMessage("a secret","https://www.github.com/probedream");
let messageWrap = document.getElementById("messageWrap");
//接收frame传来的消息
messageWrap.addEventListener("message",e=>{
messageWrap.innerHTML = e.data;
frameWindow.postMessage("你叫什么?","https://127.0.0.1:5000");
})
}
window.addEventListener("message",e=>{
/*
data:字符串数据
origin:发送消息文档所在的域
source:发送消息文档的window代理
*/
e.source.postMessage("hello","https://127.0.0.1:5000");
})
那么对应的跨文档消息传递有什么优势吗?
- 可以让我们在不断降低同源策略安全性的前提下,在来自不同域的文档间传递消息
- 原生拖放
- 原生拖放功能让我们可以方便地指定某个元素可拖动，并在操作系统要放置时做出响应。还可
以创建自定义的可拖动元素及放置目标
- 原生拖放功能让我们可以方便地指定某个元素可拖动，并在操作系统要放置时做出响应。还可
- 自定义媒体播放
- 新的媒体元素<audio>和<video>拥有自己的与音频和视频交互的 API。并非所有浏览器支持所
有的媒体格式，因此应该使用 canPlayType()检查浏览器是否支持特定的格式
- 新的媒体元素<audio>和<video>拥有自己的与音频和视频交互的 API。并非所有浏览器支持所
