JavaScript高级程序设计58.pdf

15章　　使用Canvas绘图

略

16章　　HTML5脚本编程

HTML5规范了新的HTML标记和JavaScript API，以便简化创建动态Web界面的工作

跨文档消息传递

简称XDM，指来自不同域的页面间传递消息（比如www.wrox.com域中页面与p2p.wrox.com）

XDM的核心是postMessage()方法，目的是向另一个地方传递信息，“另一个地方”指的是包含在当前页面中的<iframe>元素或者当前页面弹出的窗口

postMessage()方法接收2个参数：一条消息和一个表示消息接收方来自哪个域的字符串，第二个参数对保障安全通信非常重要，防止浏览器把消息发送到不安全的地方

//所有支持XDM的浏览器也支持contentWindow属性（指向iframe所在的window窗口）

var iframeWindow=document.getElementById("myframe").contentWindow;

iframeWindow.postMessage("A secret","http://www.wrox.com");

尝试向内嵌框架发送一条消息，指定框架中的文档来源于http://www.wrox.com，如果来源匹配消息传递，不匹配则什么都不做（可以把第二个参数设置为“*”，不推荐）

接收到XDM消息时，会触发window对象的message事件，传递给onmessage处理程序的事件对象包含3方面信息

data：作为postMessage()第一个参数传入的字符串数据

origin：发送消息的文档所在的域

source：发送消息的文档的window对象的代理，这个代理对象用于在发送上一条消息的窗口中调用postMessage()方法，如果发送消息的窗口来自同一个域，这个对象就是window

onmessage处理程序中检测消息来源可以确保传入的消息来自已知的页面

EventUtil.addHandler(window,"message",function(event){

　　　　//确保发送消息的域是已知的

　　　　if(event.origin="http://www.wrox.com"){

　　　　　　//处理接收到的数据

　　　　　　processMessage(event.data);

　　　　　　//可选：向来源窗口发送回执

　　　　　　event.source.postMessage("Received!","http://p2p.wrox.com");

　　　　}

　　});

event.source多数情况下是window对象的代理，并非实际的对象

postMessage()的第一个参数是作为字符串来实现的，后来拓展成可传入任何数据结构，但一些浏览器并没有做出改动，保险起见可以在要传入的数据调用JSON.stringify()，在onmessage事件处理程序调用JSON.parse()

原生拖放

拖放事件，拖动某元素时，会依次触发下列事件

dragstart（按下鼠标键，并移动鼠标，通过ondragstart处理程序运行JavaScript代码）

drag（在元素被拖动期间持续触发该事件）

dragend（拖动停止，无论有效还是无效）

当某个元素被拖到一个有效的放置目标上时，会依次发生

dragenter（被拖动的元素拖动到目标上，未放下）

dragover（被拖动的元素还在目标的范围内移动时，持续触发该事件）

dragleave或drop（被拖动的元素拖出了放置目标触发dragleave，放到了目标上触发drop）

自定义放置目标

取消dragenter和dragover事件的默认行为，可以将一个无效的放置目标改为有效的放置目标，释放鼠标也会触发drop事件

dataTransfer对象

它是事件对象的一个属性，只能在事件处理程序发生时访问，这个对象有两个方法getData()和setData()

getData()取得setData()保存的数据，setData()的第一个参数是getData()的唯一一个参数，一个表示保存数据类型的字符串，IE取值为“text”或“URL”，HTML5对此加以扩展，允许各种MIME类型

//设置和接收文本数据

event.dataTransfer.setData("text","some text");

var text=event.dataTransfer.getData("text");

dataTransfer对象可以为每种MIME类型都保存一个值，保存在dataTransfer对象的数据只能通过drop事件处理程序中读取

在拖动文本框中的文本时，浏览器会调用setData()方法，在这些元素被拖放到放置目标时，就可以通过getData()读到这些数据