39-JavaScript高级程序设计-HTML5 脚本编程

最新推荐文章于 2024-05-23 16:52:46 发布

青鸟明丹心

最新推荐文章于 2024-05-23 16:52:46 发布

阅读量257

点赞数

分类专栏：阅读笔记文章标签： javascript js

本文链接：https://blog.csdn.net/dandan666dandan/article/details/98105951

版权

阅读笔记专栏收录该内容

55 篇文章 1 订阅

订阅专栏

HTML5 脚本编程

一、跨文档消息传递

跨文档消息传送(cross-document messaging)：有时候简称为 XDM，指的是在来自不同域的页面间传递消息。
【核心】postMessage()：向另一个地方传递数据，对于 XDM 而言，“另一个地方”指的是包含在当前页面中的<iframe>元素，或者由当前页面弹出的窗口。
两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。
第一个参数允许传入任何数据结构（不是所有浏览器），最好还是只传字符串，结构化数据使用 JSON.stringify() 和 JSON.parse()。
第二个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。

//注意：所有支持 XDM 的浏览器也支持 iframe 的 contentWindow 属性
var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("A secret", "http://www.wrox.com"); //尝试向内嵌框架中发送一条消息

接收到 XDM 消息时，会触发 window 对象的 message 事件。这个事件是以异步形式触发的，从发送消息到接收消息可能要经过一段时间的延迟。
onmessage 处理程序的事件对象包含三方面重要信息：
1）data：作为 postMessage() 第一个参数传入的字符串数据。
2）origin：发送消息的文档所在的域，例如 “http://www.wrox.com” 。
3）source：发送消息的文档的 window 对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用 postMessage() 方法。如果发送消息的窗口来自同一个域，那这个对象就是window 。
接收到消息后验证发送窗口的来源是至关重要的，确保传入的消息来自已知的页面。

EventUtil.addHandler(window, "message", function(event){
  //确保发送消息的域是已知的域
  if (event.origin == "http://www.wrox.com"){
    //处理接收到的数据
    processMessage(event.data);
    //可选：向来源窗口发送回执
    event.source.postMessage("Received!", "http://p2p.wrox.com");
  }
});

XDM 浏览器支持：IE8+、Firefox 3.5+、Safari 4+、Opera、Chrome、iOS 版 Safari 及 Android 版 WebKit。
XDM 现名 Web Messaging，官方页面 http://dev.w3.org/html5/postmsg/。

二、原生拖放

1. 拖放事件

拖动某元素时，将依次触发下列事件：
(1) dragstart：按下鼠标键并开始移动鼠标时，会在被拖放的元素上触发 dragstart 事件。此时光标变成“不能放”符号（圆环中有一条反斜线），表示不能把元素放到自己上面。
(2) drag：触发 dragstart 事件后，随即会触发 drag 事件，而且在元素被拖动期间会持续触发该事件。
(3) dragend：当拖动停止时（无论是把元素放到了有效的放置目标，还是放到了无效的放置目标上），会触发 dragend 事件。
上述三个事件的目标：被拖动的元素。

当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生：
(1) dragenter：只要有元素被拖动到放置目标上，就会触发 dragenter 事件（类似于 mouseover 事件）。
(2) dragover：紧随其后的是 dragover 事件，而且在被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件。
(3) dragleave 或 drop：如果元素被拖出了放置目标，dragover 事件不再发生，但会触发 dragleave 事件（类似于 mouseout 事件）。如果元素被放到了放置目标中，则会触发 drop 事件而不是 dragleave 事件。
上述三个事件的目标：作为放置目标的元素。

2. 自定义放置目标

虽然所有元素都支持放置目标事件，但这些元素默认是不允许放置的。
把元素变成有效放置目标的方法：重写 dragenter 和 dragover 事件的默认行为。
Firefox 支持正常的拖放，还要取消 drop 事件的默认行为（打开被放到放置目标上的 URL）。

3. dataTransfer 对象

dataTransfer 对象，是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。
dataTransfer 对象两个主要方法：
getData(type)：获取数据
setData(type, text)：设置数据
type是一个字符串，表示保存的数据类型，取值为 “text” 或 “URL”。HTML5 允许指定各种MIME类型。

//设置和接收文本数据
event.dataTransfer.setData("text", "some text");
var text = event.dataTransfer.getData("text");
//设置和接收 URL
event.dataTransfer.setData("URL", "http://www.wrox.com/");
var url = event.dataTransfer.getData("URL");

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

在拖动文本框中的文本时，浏览器会调用 setData() 方法；在这些元素被拖放到放置目标时，就可以通过 getData() 读到这些数据。也可以在 dragstart 事件处理程序中调用 setData() ，手工保存自己要传输的数据。

4. dropEffect 与 effectAllowed

dataTransfer 对象的两个属性：
dropEffect：知道被拖动的元素能够执行哪种放置行为，可能值：“none”, “move”, “copy”, “link”。
effectAllowed：表示允许拖动元素的哪种 dropEffect。可能值：“uninitialized”, “none”, “copy”, “link”, “move”, “copyLink”, “copyMove”, “linkMove”, “all”。
注意：
要使用 dropEffect 属性，必须在 ondragenter 事件处理程序中针对放置目标来设置它。
设置 dropEffect 值只会改变光标样式。要怎样实现光标所指示的动作自己实现。
dropEffect 属性只有搭配 effectAllowed 属性才有用。

5. 可拖动

默认情况下，图像、链接和文本是可以拖动的。
draggable 属性：HTML5 为所有 HTML 元素规定的属性，表示元素是否可以拖动。
浏览器支持：IE 10+、Firefox 4+、Safari 5+和 Chrome。

6. 其他成员

HTML5 规范规定 dataTransfer 对象还应该包含下列方法和属性：

addElement(element)：为拖动操作添加一个元素。添加这个元素只影响数据（即增加作为拖动源而响应回调的对象），不会影响拖动操作时页面元素的外观。浏览器支持 Firefox 3.5+。
clearData(format)：清除以特定格式保存的数据。浏览器支持 IE、Fireforx 3.5+、Chrome 和 Safari 4+。
setDragImage(element, x, y)：指定一幅图像，当拖动发生时，显示在光标下方。浏览器支持 Firefox 3.5+、Safari 4+ 和 Chrome。
types：当前保存的数据类型。这是一个类似数组的集合，以 “text” 这样的字符串形式保存着数据类型。浏览器支持 IE10+、Firefox 3.5+和 Chrome。

三、媒体元素

HTML5 新增两个与媒体相关的标签：<audio> 和 <video>。

<!-- 嵌入视频 -->
<video src="conference.mpg" id="myVideo">Video player not available.</video>
<!-- 嵌入音频 -->
<audio src="song.mp3" id="myAudio">Audio player not available.</audio>

src：指向要加载的媒体文件。
width/height：指定视频播放器的大小。
poster：指定图像的 URI 可以在加载视频内容期间显示一幅图像。
controls：浏览器会显示 UI 控件，以便用户直接操作媒体。
后备内容：位于开始和结束标签之间，在浏览器不支持这两个媒体元素的情况下显示。

可以指定多个不同的媒体来源：

<!-- 嵌入视频 -->
<video id="myVideo">
<source src="conference.webm" type="video/webm; codecs='vp8, vorbis'">
<source src="conference.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="conference.mpg">
Video player not available.
</video>
<!-- 嵌入音频 -->
<audio id="myAudio">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Audio player not available.
</audio>

浏览器支持：IE9+、Firefox 3.5+、Safari 4+、Opera 10.5+、Chrome、iOS 版 Safari 和 Android 版 WebKit。

属性：（很多可以直接在 <audio> 和 <video> 元素中设置）

autoplay：布尔值取得或设置autoplay标志
buffered：时间范围表示已下载的缓冲的时间范围的对象
bufferedBytes：字节范围表示已下载的缓冲的字节范围的对象
bufferingRate：整数下载过程中每秒钟平均接收到的位数
bufferingThrottled：布尔值表示浏览器是否对缓冲进行了节流
controls：布尔值取得或设置controls属性，用于显示或隐藏浏览器内置的控件
currentLoop：整数媒体文件已经循环的次数
currentSrc：字符串当前播放的媒体文件的URL
currentTime：浮点数已经播放的秒数
defaultPlaybackRate：浮点数取得或设置默认的播放速度。默认值为1.0秒
duration：浮点数媒体的总播放时间（秒数） ended：布尔值表示媒体文件是否播放完成
loop：布尔值取得或设置媒体文件在播放完成后是否再从头开始播放
muted：布尔值取得或设置媒体文件是否静音
networkState：整数表示当前媒体的网络连接状态。0表示空，1表示正在加载，2表示正在加载元数据，3表示已经加载了第一帧，4表示加载完成
paused：布尔值表示播放器是否暂停
playbackRate：浮点数取得或设置当前的播放速度。用户可以改变这个值，让媒体播放速度变快或变慢，这与 defaultPlaybackRate 只能由开发人员修改的 defaultPlaybackRate 不同
played：时间范围到目前为止已经播放的时间范围
readyState：整数表示媒体是否已经就绪（可以播放）。0表示数据不可用，1表示可以显示当前帧，2表示可以开始播放，3表示媒体可以从头到尾播放
seekable：时间范围可以搜索的时间范围
seeking：布尔值表示播放器是否正移动到媒体文件中的新位置
src：字符串媒体文件的来源。任何时候都可以重写这个属性
start：浮点数取得或设置媒体文件中开始播放的位置，以秒表示
totalBytes：整数当前资源所需的总字节数
videoHeight：整数返回视频（不一定是元素）的高度。只适用于<video>
videoWidth：整数返回视频（不一定是元素）的宽度。只适用于<video>
volume：浮点数取得或设置当前音量，值为0.0到1.0

事件：（相当具体）

abort：下载中断
canplay：可以播放时；readyState值为2
canplaythrough：播放可继续，而且应该不会中断；readyState值为3
canshowcurrentframe：当前帧已经下载完成；readyState值为1
dataunavailable：因为没有数据而不能播放；readyState值为0
durationchange：duration属性的值改变
emptied：网络连接关闭
empty：发生错误阻止了媒体下载
ended：媒体已播放到末尾，播放停止
error：下载期间发生网络错误
load：所有媒体已加载完成。这个事件可能会被废弃，建议使用canplaythrough
loadeddata：媒体的第一帧已加载完成
loadedmetadata：媒体的元数据已加载完成
loadstart：下载已开始
pause：播放已暂停
play：媒体已接收到指令开始播放
playing：媒体已实际开始播放
progress：正在下载
ratechange：播放媒体的速度改变
seeked：搜索结束
seeking：正移动到新位置
stalled：浏览器尝试下载，但未接收到数据
timeupdate：currentTime被以不合理或意外的方式更新
volumechange：volume属性值或muted属性值已改变
waiting：播放暂停，等待下载更多数据

自定义媒体播放器：
使用 <audio> 和 <video> 元素的 play() 和 pause() 方法，可以手工控制媒体文件的播放。组合使用属性、事件和这两个方法，很容易创建一个自定义的媒体播放器。

检测编解码器的支持情况：
canPlayType()：接收一种格式/编解码器字符串，返回 “probably”、“maybe” 或 “”（空字符串）。

//很可能"maybe"
if (audio.canPlayType("audio/mpeg")){
  //进一步处理
}
//可能是"probably"
if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
  //进一步处理
}

Audio 类型：
<audio> 元素还有一个原生的 JavaScript 构造函数 Audio ，可以在任何时候播放音频。与 Image 很相似，但不用像 Image 那样必须插入到文档中。

var audio = new Audio("sound.mp3");
EventUtil.addHandler(audio, "canplaythrough", function(event){
  audio.play();
});

创建新的 Audio 实例即可开始下载指定的文件。下载完成后，调用 play() 就可以播放音频。如果想在一段音频播放后再播放另一段音频，必须在 onfinish 事件处理程序中调用 play() 方法。

四、历史状态管理

pushState()：执行后新的状态信息就会被加入历史状态栈，浏览器地址栏也会变成新的相对 URL。
三个参数：状态对象，新状态的标题，可选的相对 URL。
第一个参数则应该尽可能提供初始化页面状态所需的各种信息。

history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");

pushState() 会创建新的历史状态，再按下“后退”按钮，会触发 window 对象的 popstate 事件。事件对象有一个 state 属性，包含着传递给 pushState() 的状态对象。

replaceState()：更新当前状态
两个参数：状态对象，新状态的标题。
调用这个方法不会在历史状态栈中创建新状态，只会重写当前状态。

history.replaceState({name:"Greg"}, "Greg's page");

浏览器支持：Firefox 4+、Safari 5+、Opera 11.5+ 和 Chrome。

上一篇：38-JavaScript高级程序设计-canvas
下一篇：40-JavaScript高级程序设计-错误处理与调试

全书整理版：《Javascript高级程序设计》第3版（总结版）

青鸟明丹心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
39-JavaScript高级程序设计-HTML5 脚本编程

HTML5 脚本编程一、跨文档消息传递跨文档消息传送(cross-document messaging)：有时候简称为 XDM，指的是在来自不同域的页面间传递消息。【核心】postMessage()：向另一个地方传递数据，对于 XDM 而言，“另一个地方”指的是包含在当前页面中的<iframe>元素，或者由当前页面弹出的窗口。两个参数：一条消息和一个表示消息接收方来自哪个域的字...
复制链接

扫一扫