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()讀到這些數據

轉載于:https://www.cnblogs.com/sdgjytu/p/3796336.html

總結

以上是生活随笔為你收集整理的JavaScript高级程序设计58.pdf的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。