JS高階程式設計第十六章.個人學習筆記

賴嘉豪發表於2018-11-01
JS程式設計筆記

HTML指令碼程式設計

1.跨文件訊息傳遞

postMessage（）方法接受兩個引數，一個訊息和一個表示訊息接收方來自哪個域的字串。

例如：

var iframeWindow = document.getElementById('myframe').contentWindow;
iframeWindow.postMessage('a secret','http://www.wrox.com');

複製程式碼


接收到XDM訊息時，會觸發window物件的message事件。這個事件是以非同步形式觸發的，因此從傳送訊息到接收訊息（觸發接受視窗的message事件）可能要經過一段時間的延遲。觸發message事件後，傳遞給onmessage處理程式的事件物件包含以下三個方面的重要資訊。

data：作為postMessage（）第一個引數傳入的字串資料。
origin：傳送訊息的文件所在的域，例如‘http://www.wrox.com’。
source:傳送訊息的文件的window物件的代理。這個代理物件主要用於在傳送上一條訊息的視窗中呼叫postMessage（）方法。如果傳送訊息的視窗來自同一個域，那這個物件就是window。

接收到訊息後驗證傳送視窗的來源是至關重要的。就像給postMessage（）方法指定第二個引數，以確保瀏覽器不會把訊息傳送個未知頁面一樣，在onmessage處理程式中檢測訊息來源可以確保傳入的訊息來自已知的頁面。基本的檢測模式如下：

EventUtil.addHandLer(window,'messgae',function(event){
    //確保傳送訊息的域是已知的域
    if(event.origin == 'http://www.wrox.com'){
        //處理接收到的資料
        processMessage(event.data);
        //可選：向來源視窗傳送回執
        event.source.postMessgae('Reveived!','http://p2p.wrox.com');
    }
});複製程式碼

2.原生拖放

2.1拖放事件

拖動元素時，逐次觸發下列事件：

1.dragstart
2.drag
3.dragend

當某個元素被拖動到一個有效的放置目標上時，下列事件會依次發生：

1.dragenter
2.dragover
3.dragleave 或 drop

三個事件的目標都是作為放置目標的元素。

如果拖動元素經過不允許放置的元素，無論使用者如何操作，都不會發生drop事件


2.3 dataTransfer物件

dataTransfer是物件的屬性，所以只能在拖放事件的事件處理程式中訪問dataTransfer物件。在物件處理程式中，可以使用這個物件的屬性和方法來完善拖放功能。

dataTransfer物件有兩個主要方法：getData（）和setData（）。

setData的第一個引數是引數的名字，第二個引數是引數的值
getData只有一個引數 就是引數的名字

dataTransfer有兩個屬性：dropEffect和effectAllowed

dropEffect屬性可以知道被拖動的元素能夠執行哪種放置行為。這個屬性有下列4個可能的值。

none：不能把拖動的元素放在這裡。這是除文字框之外所有元素的預設值。
move：應該把拖動的元素移動到放置目標
copy：應該把拖動的元素複製到放置目標
link:表示放置目標會開啟拖動的元素（但拖動的元素必須是一個連結，有URL）。

effectAllowed屬性可以能的值如下。

uninitialized:沒有給被拖動的元素設定任何放置行為。
none:被拖動的元素不能有任何行為。
copy:只允許值為'copy'的dropEffect
link:只允許值為'link'的dropEffect
move:只允許值為'move'的dropEffect
copyLink:允許值為'copy'和'link'的dropEffect
copyMove:允許值為'copy'和'move'的dropEffect
linkMove:允許值為'link'和'move'的dropEffect
all:允許任意dropEffect

必須在ondragstart事件處理程式中設定effectAllowed屬性


可以在html元素上設定draggable屬性為true讓元素可以被拖動


dataTransfer物件還包含以下方法和屬性：
addElement(element)：為拖動操作新增一個元素。新增這個元素隻影響資料（即增加作為拖動源而相應回撥的物件），不會影響拖動操作時頁面元素的外觀。
clearData(format):清楚以特定個事儲存的資料。
setDragImage(element,x,y):指定一副影象，當發生拖動時，顯示在游標下方。這個方法接受的三個引數分別是要顯示的HTML元素和游標在影象中的x、y座標。其中，HTML元素可以是一幅影象，也可以是其他元素。是影象則顯示影象，是其他元素則顯示渲染後的元素。
types:當前儲存的資料型別。這是一個類似陣列的集合，以text這樣的字串形式儲存著的資料型別。



3.媒體元素

viedeo和audio的屬性、介紹、事件在487介紹


相關文章