JavaScript HTML5脚本编程

JavaScript HTML5脚本编程   

一、跨文档消息传递

    跨文档消息传送（XDM）：在来自不同域的页面间传递消息。

    postMessage()方法：向当前页面中的<iframe>元素或者由当前页面弹出的窗口传递数据。两个参数：一条消息、接收方来自哪个域。

var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("A secret","http://www.1.com");

  接收到XDM消息时，会触发window对象的message事件，事件包含：① data：传入的数据。②origin：发送方所在的域，可用于验证消息来源  ③source：发送方的window 对象的代理，只通过其调用postMessage()

二、原生拖放

    能够在框架间、窗口间，甚至在应用间拖放网页元素。

1、拖放事件

    1、拖动某元素时，被拖放的元素将依次触发下列事件：
(1) dragstart ：按下鼠标键并开始移动鼠标时，可通过 ondragstart事件处理程序来运行JavaScript代码

(2) drag：在元素被拖动期间持续触发，

(3) dragend ：当拖动停止时就会触发

   2、当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生： 

(1) dragenter ：有元素被拖动到放置目标上时触发

(2) dragover ：被拖动的元素在放置目标的范围内移动时持续触发

(3) dragleave或drop：元素被拖出放置目标时触发dragleave。元素被放在放置目标上时触发drop

2、自定义放置目标

重写放置目标元素的dragenter 和dragover事件的默认行为，就可以将此元素定义为放置目标。

EventUtil.addHandler(droptarget,"dragover",function(event)){
    EventUtil.preventDefault(event);
});

EventUtil.addHandler(droptarget,"dragenter",function(event){
    EventUtil.preventDefault(event);
});

3、dataTransfer对象

    dataTransfer是drop事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。有两个主要方法：

getData() ——参数：保存的数据类型：可以是"text",或者"URL"

setData()——参数：①保存的数据类型 ②数据

event.dataTransfer.setData("text","some text");
var text = event.dataTransfer.getData("text"); 

当文本被拖动时，会触发setData()方法，将文本保存起来。放置目标时，可通过getData()方法读取数据。

4、dropEffect和effectAllowed

dataTransfer对象有两个属性：

放置目标可能的放置行为dropEffect：  none：不能放置  move：移动到这里   copy：复制到这里  link：打开拖动的元素

允许拖动元素的哪种dropEffect：effectAllowed属性：可以是dropEffect的一个或两个值组合，如“linkMove”。或"uninitialized"没有设置

5、可拖动

  可以设置元素的draggable属性（元素是否可以拖动），为"true"时就可以拖动。

<div draggable="true"> ... </div>    //此时div元素可以拖动了

6、dataTransfer对象其他成员

addElement(element)：为拖动操作添加一个元素。

clearData(format)：清除以特定格式保存的数据。

setDragImage(element, x, y)：指定一幅图像，当拖动发生时，显示在光标下方。

types：当前保存的数据类型。

三、媒体元素

    在网页中嵌入音频用<audio>标签，嵌入视频用<video>标签。src指向要加载的媒体文件，poster制定加载内容时显示的图片

<video src="2.mpg" id="Video"> Video player not available. </video>
<audio src="3.mp3" id="myAudio">Audio player not available. </audio>

使用<video>和<audio>元素的play()和pause()可以手动控制媒体文件的播放。

四、历史状态管理

    历史状态管理让我们不必关闭当前页面即可修改浏览器的历史状态栈。

history.pushState()方法，该方法可以接收三个参数：状态对象、新状态的标题和可选的相对 URL。

新的状态信息会被加入历史状态栈，而浏览器地址栏也会变成新 的相对URL。

调用replaceState()方法，可以更新当前状态，不会在历史状态栈中创建新状态，只会重写当前状态。 传入的参数与pushState()的前两个参数相同。