Drag&Drop API (拖放)
使用dataTransfer 接口来支持拖放数据存储， 它的使用方式一般为 event.dataTransfer。
设置 ：
dataTransfer.effectAllowed[=value]。该属性返回拖曳对象允许的拖曳时的反馈效果
【放在可移动元素start事件上】
dataTransfer.dropEffect[=value]。该属性返回已设置的拖放时反馈效果。
【放在目标容器over事件上】
dataTransfer.items。返回一个关于拖曳数据的DataTransferItemList对象。
dataTransfer.setDragImage(element, x, y)。
指定拖曳元素时随鼠标移动的图片，x、y分别是图片相对于鼠标的横坐标和纵坐标。
dataTransfer.addElement(element)。将元素添加到被拖曳的列表里。如果你想让某个元素跟随被拖曳元素一同被拖曳，可以使用这个方法。
dataTransfer.types。返回在dragstart事件触发时为元素存储数据的格式。如果是系统文件的拖曳，则返回files。
dataTransfer.setData(format, data)。
为元素添加数据，在dragstart事件触发时可以用它为被拖曳元素存储数据。数据格式一般有两种：
text/plain（设置format为字符串text即可，主要用于文本数据）和text/uri-list（设置format为字符串url即可，主要用于url）。
data=dataTransfer.getData(format)。
返回存储的数据。如果数据不存在，则返回空字符串。
dataTransfer.clearData([format])。删除指定格式的数据。如果不指定格式，则删除所有数据。
dataTransfer.files。
如果是拖曳系统文件，返回正在被拖曳的文件列表对象。可以通过它获得所拖曳的文件数据。
【拖拽上传】
代码片段 1
效果预览
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!
DOCTYPE
html
>
<
html
>
<
head
>
<
meta
http-equiv
=
"content-type"
charset
=
"utf-8"
/>
<
meta
name
=
"generator"
content
=
"editplus"
/>
<
meta
name
=
"author"
content
=
""
/>
<
meta
name
=
"keywords"
content
=
""
/>
<
meta
name
=
"description"
content
=
""
/>
<
title
>
fileAPI(图片拖拽上传)
</
title
>
<
style
type
=
"text/css"
>
#box
{
border:
2
px
gray
dotted;
width:
171
px;
height:
158
px;
line-height:
158
px;
text-align:
center;
mask-image:
url(
mask.png
);
-webkit-mask-image:
url(
mask.png
);
mask-clip:
content;
-webkit-mask-clip:
content;
}
#box
.hover
{
border:
2
px
olive
solid;
}
#box
.drop
{
border:
2
px
blue
solid;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"box"
>
</
div
>
<
script
type
=
"text/javascript"
>
History API（历史记录）
提供了两个新方法pushState()和replaceState()，它们允许我们添加和改变当前浏览器的地址。
设置：
history.pushState({username: "html5"}, "user account", "user.html"); 用于向history对象添加当前页面的记录，并且改变浏览器地址栏的URL
history.replaceState({username: "html5" }, "user account", "user.html"); 类似于pushState()，只是将当前页面状态替换为新的状态
值： state对象 标题 可选参数目标URL
代码片段 2
效果预览
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!
DOCTYPE
html
>
<
html
>
<
head
>
<
meta
http-equiv
=
"content-type"
content
=
"text/html;charset=utf-8"
/>
<
meta
name
=
"generator"
content
=
"editplus"
/>
<
meta
name
=
"author"
content
=
""
/>
<
meta
name
=
"keywords"
content
=
""
/>
<
meta
name
=
"description"
content
=
""
/>
<
title
>
History API新特性
</
title
>
<
style
type
=
"text/css"
>
*
{
margin:
0;
padding:
0;
}
div
{
width:
100
px;
height:
50
px;
text-align:
center;
line-height:
50
px;
color:
#fff;
}
#click-item
{
background:
#ffcc00;
}
#result-item
{
background:
#ff9900;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"click-item"
>
</
div
>
<
div
id
=
"result-item"
>
</
div
>
<
script
type
=
"text/javascript"
>
var
clickItem
=
document
.
getElementById
(
'click-item'
)
;
var
resultItem
=
document
.
getElementById
(
'result-item'
)
;
clickItem
.
onclick
=
function
(
)
{
resultItem
.
innerHTML
=
'clicked!'
;
history
.
pushState
({
note
:
'set result'
}
,
''
,
'result.html'
)
;
}
</
script
>
</
body
>
</
html
>
Notification API (桌面通知)
可以使用webkitNotifications.checkPermission这个方法来判断当前Notification的许可状态。Notification的状态一共有3种：
0表示PERMISSION_ALLOWED（允许）。
1表示PERMISSION_NOT_ALLOWED（未作许可授权）。
2表示PERMISSION_DENIED（拒绝）。
一个
小例子
，请使用Chrome浏览器查看。
Communication API （跨域通信）
以往的浏览器，跨域存在安全问题（CSRF攻击，Cross-Site Request Forgery跨站请求伪造），现在使用Communication API可以很好的避免这个问题。
发展：
起初，使用iframe或Frameset直接调用某个页面；
演化，①以Web Service③和各种SDK④下的API为代表的主动服务模式。它们的代表有新浪微博SDK的API接口、腾讯系列SDK的API接口等各种专业服务提供商。
②以iframe和<script>为代表的被动服务模式。它们的代表有CNZZ站长统计、天气预报和其他各类被iframe索引的资源。
③后来被大家广为接受的一种方案，即Ajax方式。出于安全考虑，不允许使用跨域。
WebSocket API
提供了全双工通信方式，代表了一个巨大的进步，我们从此可以在Web应用中实现实时的数据传输和获取。
支持双向、双工通信。可以实现实现微博新消息通知、邮件推送、实时游戏和聊天等功能。
Web Worker
简单
来说，就是通过JavaScript创建一个后台进程（或者叫工作者进程），执行一些特殊的任务（比如耗时比较长的数据处理），并且提供主进程和新进程之间数据交换的
接口：postMessage和onmessage。它起到互不阻塞执行的效果，避免了传统的JavaScript执行长时间操作时界面无响应的弊端，提高了性能及用户体验。
Storage API
主要涉及localStorage API、sessionStorage API、applicationCacheAPI（离线存储）和服务器端
Manifest
文件等概念。
Canvas和WebGL
Device API
可能是所有的HTML相关API中最大胆、最有应用前景、最有技术突破的一个草案:，使HTML5 标签可以直接调用类似摄像头、电源、系统、文件、网络等各种重要的
但是以前从未实现的功能。
子API:
Geolocation API（
地理位置
API）
File API来帮助我们在Web页面中访问本地文件，它可以在Web应用中展现文件，或者选择并读取文件。
Media Capture API增强了HTML表单，提供了对音频、图像和视频进行采集的功能。PC上还未实现，欧朋手机浏览器实现HTML5标签打开摄像头。
Contact API主要应用在移动设备上，提供对用户通用通讯录的访问，包含如下关键接口。
Contacts接口：提供了访问用户通用通讯录的方法。
Contact接口：提供了读操作来获取单个联系人的信息
Calendar API
与Contact API非常类似，提供了对用户通用日历的存取方式，主要应用在移动设备上。
API定义了一个高级的接口来访问日历信息，例如事件、提醒、警告或其他日历信息。
System Information API用于为Web应用提供访问系统各种运行时属性的方式，主要也应用在移动设备上。（都还未有浏览器实现）
电源（
电量
）
CPU（类型、规格和当前系统负载信息）
温度
网络（WIFI?3G/4G？信号强度？）
传感器（侦测外部环境）
多媒体编解码（设备是否支持XX格式）
存储设备（硬盘？闪存卡？性能？）
输出设备（屏幕、声音播放器... ...）
输入设备（鼠标、键盘、摄像头... ...）
Messaging API
定义了一个简单的API来发送和接收电子邮件、短信和彩信，主要应用在移动设备上。许多现代的浏览器已经支持mailto（非常常见）、tel（常见）
和sms（不常见）协议。MessagingAPI补充了sms:（短信）、mms:（彩信）和mailto:（电子邮件）等URI类型，以提供以下功能：
为消息添加附件的能力。
发送一条消息成功或者失败后的回调方法。
-----------------------------------------------
5种实用API
:
页面全屏
焦点位置
拍摄照片
电量变化
资源预加载
转载请注明原文地址: https://ju.6miu.com/read-36710.html
