JavaScript 笔记(16)- 跨文档消息传递、拖放、音/视频

原创 乘风逐月 随笔 JavaScript 177阅读 2018-06-12 15:32:40 举报

一、跨文档消息传递

跨文档消息传递有时候简称为XDM,指的是来自不同域的页面间消息传递。XDM的核心方法就是 postMessage(),该方法接受两个参数:一条消息和一个表示消息接受方来自哪个域的字符串。第二个参数对保障安全通信非常中要,可以防止浏览器把消息发送到不安全的地方。
例如:

上例表示:点击按钮时向内嵌框架发送一条消息,并指定框架中的文档必须来源于 'http://www.wrox.com' 域。如果来源匹配,消息会传递到内嵌框架中;否则,postMessage() 什么也不做。如果第二个参数是一个星号 "*",则表示可以把消息发送到来自任何域的文档。

内嵌框架接受到XDM消息时,会触发 window 对象的 message 事件,这个事件是以异步形式触发的。因此发送消息到接受消息可能有时间延迟。内嵌框架触发 message 事件时,事件对象包含三个重要属性信息:
a. data: postMessage() 第一个参数传入的字符串数据
b. origin: 发送消息的文档所在的域
c. source: 发送消息的文档的window 对象的代理
注: origin 属性可以检测消息来源是否可靠。

二、拖放

1. 设置元素可拖动

默认情况下,图片,链接和文本是可以拖动的,文本需要选中后才可以拖动。如果要设置其他元素也可以拖动,需要设置元素的 draggable 属性为 true。图像、链接的 draggable 属性为默认为 true,其他元素默认为 false。

2. 拖放事件

(1)拖动元素时将依次触发下列事件:
a. dragstart
b. drag
c. dragend
按下鼠标键并开始移动鼠标时,会在被拖放的元素上触发 dragstart 事件,此时光标变成“不能放”符号(圆环中一条反斜线),表示不能把元素放到自己上面。拖动开始时,可以通过 ondragstart 事件处理程序运行 js 代码。 触发 dragstart 事件后,就会触发 drag 事件,而且在元素移动期间持续触发。当停止拖动,或者把元素放到了有效的放置目标(或无效)的放置目标上,都会触发 dragend 事件。
以上三个事件的目标都是被拖动的元素。
(2)元素被拖动到有效目标时依次触发下列事件:
a. dragenter
b. dragover
c. dragleave 或 drop
只要有元素被拖动到放置目标上,就会触发 dragenter 事件。随即触发 dragover 事件,在拖动元素在目标范围移动时,持续触发。如果元素被拖出了放置目标,该 dragover 事件不会再发生,但会触发 dragleave 事件。如果元素被放置到目标中,会触发 drop 事件。这三个事件的目标元素都是作为放置目标的元素。

3. 定义放置目标

所有元素都支持放置目标事件,但默认是不允许放置的。当拖动元素经过不允许放置的目标时,光标变成“不能放”符号,无论用户如何操作,都不会发生 drop 事件。
要设置元素为可放置的目标,可以重写 dragover 和 dragenter 事件,阻止默认行为即可。设置后,拖动元素移动到放置目标,光标会变成允许放置的符号,释放鼠标会触发 drop 事件。

4.dataTransfer 对象

dataTransfer 对象,是拖放事件对象 event 的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据。在事件处理程序中,可以使用这个对象的属性方法来完善拖放功能。
dataTransfer 对象的方法
(1)setData(type,data): 设置数据。type 表示数据类型。
(2)getData(type): 获取数据
(3)clearData(): 清除数据
注:
a. 保存在 dataTransfer 对象中的数据只能在 drop 事件处理程序中读取。
b. 拖动文本/图像/链接时,浏览器默认会调用 setData() 方法,将文本/图像路径/链接地址以 'text' 的格式保存在 dataTransfer 对象中。然后在放置目标的 drop 事件中调用 getData() 方法获取数据。

三、音视频

1. video 元素

(1)html特性:
a. src: 指向要加载的视频文件。
b. width/height: 指定视频播放器的大小
c. poster: 指定图像的URL,可以在加载视频内容时显示该图像
d. controls: 是否显示视频播放器的 UI 控件
e. autoplay: 自动播放
f. loop: 循环播放
g. preload: 是否预加载。值有: auto(默认)自动加载,none不加载
(2)方法
a. play(): 播放视频
b. pause(): 暂停视频
(3)属性
a.paused: true表示视频是暂停的,false,表示视频是播放的。
(4)事件
a. play: 视频播放时触发
b. pause: 视频暂停时触发
c. ended: 视频结束时触发
d. error: 视频出错时触发
(5) source 元素
为了兼容浏览器,可以指定多个不同的视频来源。即可以不在 video 中指定 src 属性,而是在 video 元素中使用多个 source 元素,每个元素的 src 指向不同的视频源。

2. audio 元素

(1)html特性:
a. src: 指向要加载的视频文件。
b. autoplay: 自动播放
c. loop: 循环播放
d. controls: 是否显示音频播放器的 UI 控件
(2)方法
a. play(): 播放音频
b. pause(): 暂停音频
(3)属性
a.paused: true表示音频是暂停的,false,表示音频是播放的。
(4)事件
a. play: 音频播放时触发
b. pause: 音频暂停时触发
c. ended: 音频结束时触发
d. error: 音频出错时触发
(5) source 元素
可以指定多个不同的音频来源。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复