四周搞定《JavaScript 高级程序设计》 - 读书笔记（D
2018-09-23 本文已影响13人
显卡84du
第16章 HTML5 脚本编程
16.1 跨文档消息传递
跨文档消息传送（cross-document messaging）XDM，指来自不同域的页面间传递消息。
16.2 原生拖放
16.2.3 dataTransfer对象
setData() 方法的第一个参数，也是 getData() 方法唯一的参数，是一个字符串，表示保存的数据类型，（IE中）取值为"text" 或 "URL"。
// 设置和接收文本数据
event.dataTransfer.setData("text", "some text");
var text = event.dataTransfer.getData("text");
// 设置和接收URL
event.dataTransfer.setData("URL", "some text");
var url= event.dataTransfer.getData("URL");
16.2.4 dropEffect 与 effectAllowed
通过 dropEffect 属性可以知道被拖动的元素能够执行哪种放置行为。
| 属性 | 含义 |
|---|---|
| none | 不能把拖动的元素放在这里，出文本框之外所有元素的默认值 |
| move | 应该把拖动的元素移动到放置目标 |
| copy | 应该把拖动的元素复制到放置目标 |
| link | 表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL） |
dropEffect 属性只有搭配 effectAllowed 属性才有用， effectAllowed 属性表示允许拖动元素的哪种 dropEffect。
| 属性 | 含义 |
|---|---|
| none | 此项表示不允许放下 |
| copy | 源项目的复制项可能会出现在新位置 |
| copyLink | 允许 copy 或者 link 操作 |
| copyMove | 允许 copy 或者 move 操作 |
| link | 可以在新地方建立与源的链接 |
| linkMove | 允许 link 或者 move 操作 |
| move | 一个项目可能被移动到新位置 |
| all | 允许所有的操作 |
| uninitialized | 效果没有设置时的默认值，则等同于 all |
16.2.6 其他成员
HTML5 规范规定 dataTransfer 对象还应该包含下列方法和属性。
| 属性 | 含义 |
|---|---|
| addElement(element) | 为拖动操作添加一个元素 |
| clearData(format) | 清除以特定格式保存的数据 |
| setDragImage(element, x, y) | 指定一副图像，当拖动发生时，显示在光标下方 |
| types | 当前保存的数据类型 |
16.4 历史状态管理器
history.pushState() 方法接受三个参数：状态对象、新状态的标题和可选的相对 URL。
history.pushState( { name: "Nick"}, "Nick Page", "nick.html");
执行 pushState() 方法后，新的状态信息就会被加入历史状态栈，而浏览器地址栏也会变成新的相对 URL，但浏览器不会向服务器发送请求。
