- 跨文档消息传递
跨文档消息传递
跨文档消息传递有时候简称为XDM，指的是在来自不同域的页面间传递消息。例如，www.wrox.com域中的页面与位于一个内嵌框架中的p2p.wrox.com域中的页面通信。XDM的核心是postMessage()方法。
postMessage()方法接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。第二个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。例：
var iframeWindow = document.getElementById('myframe').contentWindow
iframeWindow.postMessage('A secret', 'http://www.wrox.com')
在收到XDM消息时，会触发window对象的message事件。这个事件是以异步形式触发的，触发message事件后，传递给onmessage处理程序的事件对象包含以下三个方面的重要信息。
（1）data：作为poseMessage方法第一个参数传入的字符串数据
（2）origin：发送消息的文档所在的域
（3）source：发送消息的文档的window对象的代理
原生拖放
拖放事件
拖动某元素时，将依次触发下列事件：
（1）dragstart
（2）drag
（3）dragend
按下鼠标键并开始移动鼠标时，会在被拖放的元素上触发dragstart事件，随后会触发drag事件，而且在元素被拖动期间会持续触发该事件。这个事件与mouseover事件相似，当拖动停止时会触发dragend事件。
上述三个事件的目标都是被拖动的元素。
当某个元素被拖动到一个有效的放置目标上时，下列事件会以此发生：
（1）dragenter
（2）dragover
（3）dragleave或drop
只要有元素被拖动到放置目标上，就会触发dragenter事件（类似于mouseover事件）。紧随其后的是dragover事件，而且在被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件，如果元素被拖出了放置目标，dragover事件不再发生，但会触发dragleave事件（类似于moseout事件）。如果元素被放到了放置目标中，则会触发drop事件而不是dragleave事件。上述三个事件的目标都是作为放置目标的元素。
dataTransfer对象
它是事件对象的一个属性，用于从被拖放元素向放置目标传递字符串格式的数据。
dataTransfer对象有两个主要方法：getData()和setData()。
event.dataTransfer.setData('text', 'some text')
var text = event.dataTransfer.getData('text')
可拖动
默认情况下，图像、连接和文本是可以拖动的，也就是说，不用额外编写代码，用户就可以拖动它们。有的元素是不可以被拖动的，如果想设置为可以拖动，那么只需要将draggable属性设置为true就可以了
网友评论