JavaScript第十六章学习

一个前端小菜鸡QM
157 阅读6分钟

HTML5脚本编程

跨文档消息传递XDM

  • 核心：postMessage()方法

接收两个参数：一条信息和一个表示信息接收方来自哪个域的字符串

若想传入结构化数据：最 佳选择是先在要传入的数据上调用 JSON.stringify()，通过 postMessage()传入得到的字符串，然 后再在 onmessage 事件处理程序中调用 JSON.parse()

  • 接收到XDM消息的适合会触发window对象的message事件。触发后传递给onmessage处理程序的事件对象包含以下三方面重要信息

    data：作为postMessage()第一个参数传入的字符串数据

    origin：发送消息的文档所在的域

    source：发送消息的文档的window对象的代理。

    注意：event.source大多数情况下只是window对象的代理，并非wwindow对象

    只用这个代理对象使用postMessage()

原生拖放

拖放事件

依次触发：dragstart、drag、dragend

按下鼠标键并开始移动鼠标时，会在被拖放的元素上触发dragstart事件

拖动开始时候，可以通过ondragstart事件处理程序来运行JavaScript

之后随即触发drag事件，并且拖动期间持续触发

拖动停止会触发dragend

某个元素被拖动到一个有效的放置目标上，依次触发：dragenter、dragover、dragleave或drop

dragleave仅当元素被拖出放置目标；元素被放到放置目标中，就会触发drop事件

自定义放置目标

有些元素是不允许放置的，但可以通过重写dragenter和dragover事件的默认行为把任意元素变成有效的放置目标

在 Firefox 3.5+中，放置事件的默认行为是打开被放到放置目标上的 URL

dataTransfer对象

是事件对象的一个属性，用于从被拖动元素向放置m目标传递字符串形式的数据

getData()和setData()

  • getData()可以取 得由 setData()保存的值。setData()方法的第一个参数，也是 getData()方法唯一的一个参数，是 一个字符串，表示保存的数据类型，取值为"text"或"URL"
  • 注意：保存在 dataTransfer 对象中的数据只能在 drop 事件处理程序中读取。如果在 ondrop 处理程序中没有读到数据，那就是 dataTransfer 对象已经被 销毁，数据也丢失了
  • 拖动文本框文本时，浏览器会调用setData()方法，将拖动的文本以“text”保存在dataTransfer对象中
  • 拖放链接或图像时，会调用setData()方法并保存URL，这些元素被拖放到放置目标时，可以通过getData()读到这些数据

dropEffect与effectAllowed

dataTransfer对象的属性

dropEffec属性

知道被拖动的元素能够执行那种放置行为

  • “none”：不能把拖动的元素放这里（除文本框之外的所有元素默认值）
  • “move”：应该把拖动的元素移动到放置目标
  • “copy”：应该把拖动的元素复制到放置目标
  • “link”：表示放置目标会打开拖动的元素（拖动的元素必须是一个链接，有URL）

使用dropEffect属性，必须在ondragenter事件处理程序中针对放置目标来设置它

dropEffect属性只有搭配effectAllowed属性才有用，而effectAllowed属性表示允许t拖动元素的哪种dropEffect

effectAllowed属性可能的值

可拖动

HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动

图像和链接的draggable属性自动被设置成true，而其他元素这个属性默认值都是false。

dataTransfer对象还应该包含下列方法和属性
  • addElement(element)：为拖动操作添加一个元素。添加这个元素只影响数据（即增加作为拖 动源而响应回调的对象），不会影响拖动操作时页面元素的外观。在写作本书时，只有 Firefox 3.5+ 实现了这个方法
  • clearData(format)：清除以特定格式保存的数据。实现这个方法的浏览器有 IE、Fireforx 3.5+、 Chrome和 Safari 4+
  • setDragImage(element, x, y)：指定一幅图像，当拖动发生时，显示在光标下方。这个方法接收的三个参数分别是要显示的 HTML元素和光标在图像中的 x、y坐标。其中，HTML元素 可以是一幅图像，也可以是其他元素。是图像则显示图像，是其他元素则显示渲染后的元素。 实现这个方法的浏览器有 Firefox 3.5+、Safari 4+和 Chrome
  • types：当前保存的数据类型。这是一个类似数组的集合，以"text"这样的字符串形式保存着 数据类型。实现这个属性的浏览器有 IE10+、Firefox 3.5+和 Chrome

媒体元素

<audio><video>两个媒体元素

在标签中包含 src 属性，指向要加载的媒体文件。还可以设置 width 和 height 属性以指定视频播放器的大小，而为 poster 属性指定图像的 URI可以在加载视频内容期间 显示一幅图像。另外，如果标签中有 controls 属性，则意味着浏览器应该显示 UI控件，以便用户直 接操作媒体。位于开始和结束标签之间的任何内容都将作为后备内容，在浏览器不支持这两个媒体元素 的情况下显示

属性

自定义媒体播放器

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

检测编码器的支持情况

<audio><video>元素都有一个canPlayType()方法

该方法接收一种格式/编解码器字符串，返回 "probably"、"maybe"或""（ 空字符串）。空字符串是假值

audio类型

<audio>元素还有一个原生的 JavaScript构造函数 Audio，可以在任何时候播放音频。从同为 DOM 元素的角度看，Audio 与 Image 很相似，但 Audio 不用像 Image 那样必须插入到文档中。只要创建个新实例，并传入音频源文件即可。

历史状态管理

通过 hashchange 事件，可以知道 URL的参数什么时候发生了变化，即什么时候该有所反应。而 通过状态管理 API，能够在不加载新页面的情况下改变浏览器的 URL。

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

会创建新的历史状态，出现后退按钮，按下按钮可以触发window对象的popstate事件；popstate 事件的事件对象有一个 state 属性，这个 属性就包含着当初以第一个参数传递给 pushState()的状态对象

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

在使用HTML5的状态管理机制时，请确保使用 pushState()创造的每一个“假” URL，在 Web服务器上都有一个真的、实际存在的 URL与之对应。否则，单击“刷 新”按钮会导致 404错误。

avatar
文章
阅读
粉丝