15|HTML脚本编程

其中在上一章节的文章内容当中,讲到了对应的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");
})

那么对应的跨文档消息传递有什么优势吗?

• 可以让我们在不断降低同源策略安全性的前提下,在来自不同域的文档间传递消息

1. 原生拖放
   1. 原生拖放功能让我们可以方便地指定某个元素可拖动，并在操作系统要放置时做出响应。还可
      以创建自定义的可拖动元素及放置目标
2. 自定义媒体播放
   1. 新的媒体元素<audio>和<video>拥有自己的与音频和视频交互的 API。并非所有浏览器支持所
      有的媒体格式，因此应该使用 canPlayType()检查浏览器是否支持特定的格式