html5新增api

WEB迅猛的发展趋势已远远超乎我的想象,一起来探索下HTML5中的新知识吧。

多媒体相关的

方法:load() 加载、play() 播放、pause() 暂停
属性:currentTime 视频播放的当前进度、
duration:视频的总时间
paused:视频播放的状态.
事件:
oncanplay: 事件在用户可以开始播放视频/音频(audio/video)时触发。
ontimeupdate:通过该事件来报告当前的播放进度.
onended:播放完时触发

全屏:video.webkitRequestFullScreen();
html5新增api

html5新增api

拖拽

在HTML5的规范中,我们可以通过为元素增加draggable=”true”来设置此元素是否可以进行拖拽操作,其中图片、链接默认是开启的。

拖拽元素

页面中设置了draggable=”true”属性的元素

目标元素

页面中任何一个元素都可以成为目标元素

事件监听

拖拽元素

ondrag 应用于拖拽元素,整个拖拽过程都会调用
ondragstart 应用于拖拽元素,当拖拽开始时调用
ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素,当拖拽结束时调用

目标元素

ondragenter 应用于目标元素,当拖拽元素进入时调用
ondragover 应用于目标元素,当停留在目标元素上时调用
ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素,当鼠标离开目标元素时调用

历史记录相关

提供window.history,对象我们可以管理历史记录,可用于单页面应用,Single Page Application,可以无刷新改变网页内容。
旧版本浏览器..
history.back() 回退
history.forward() 前进

地理定位

在HTML规范中,增加了获取用户地理信息的API,这样使得我们可以基于用户位置开发互联网应用,即基于位置服务 (Location Base Service) LBS

获取地理信息方式

1、IP地址
2、三维坐标
GPS(Global Positioning System,全球定位系统)
目前世界上在用或在建的第2代全球卫星导航系统(GNSS)有:1.美国 Global Positioning System (全球定位系统) 简称GPS;.2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM (全球卫星导航系统)简称GLONASS(格洛纳斯);3.欧盟(欧洲是不准确的说法,包括中国在内的诸多国家也参与其中)Galileo satellite navigation system(伽利略卫星导航系统) 简称GALILEO(伽利略);4.中国 BeiDou(COMPASS) Navigation Satellite System(北斗卫星导航系统)简称 BDS ;5.日本 Quasi-Zenith Satellite System (准天顶卫星系统) 简称QZSS ;印度 India Regional Navigation Satellite System(印度区域卫星导航系统)简称IRNSS;以上6个系统中国都能使用。
Wi-Fi
手机信号
3、用户自定义数据
如下图对不同获取方式的优缺点进行了比较,浏览器会自动以最优方式去获取用户地理信息。
html5新增api

隐私

HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可,才能获取用户的位置信息。

API详解

navigator.getCurrentPosition(successCallback, errorCallback, options)
获取当前地理信息
navigator.watchPosition(successCallback, errorCallback, options)
重复获取当前地理信息
1、当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象position.Coords(坐标)

1
2
position.coords.latitude纬度
position.coords.longitude经度

2、当获取地理信息失败后,会调用errorCallback,并返回错误信息error
3、可选参数 options 对象可以调整位置信息数据收集方式

Web存储

随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案。
Storage 存储

1
2
window.sessionStorage //会话存储
window.localStorage //本地存储

(向本地保存数据,有可能在浏览器内存里面,有可能在硬盘上面.)

特性

1、设置、读取方便
2、容量较大,sessionStorage约5M、localStorage约20M
3、只能存储字符串,可以将对象JSON.stringify() 编码后存储

window.sessionStorage 会话存储

1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享

window.localStorage

1、永久生效,除非手动删除
2、可以多窗口共享

方法详解

1
2
3
4
5
setItem(key, value) //设置存储内容
getItem(key) //读取存储内容
removeItem(key) //删除键值为key的存储内容
clear() //清空所有存储内容
key(n) //以索引值来获取存储内容

全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。

1
2
requestFullscreen() //开启全屏显示
cancleFullscreen() //关闭全屏显示

不同浏览器需要添加前缀如
webkitRequestFullScreen、mozRequestFullScreen
webkitCancleFullScreen、mozCancleFullScreen
通过document.fullScreen检测当前是否处于全屏
不同浏览器需要添加前缀
document.webkitIsFullScreen、document.mozFullScreen
全屏伪类
:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}

1
2
3
4
5
6
7
8
9
10
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}

网络状态

我们可以通过window.onLine来检测,用户当前的网络状况,返回一个布尔值

1
2
window.ononline //用户网络连接时被调用
window.onoffline //用户网络断开时被调用

应用缓存

HTML5中我们可以轻松的构建一个离线(无网络状态)应用,只需要创建一个cache manifest文件。

优势

1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源,提升访问速度,增强用户体验
4、减少请求,缓解服务器负担

### 缓存清单
一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用 .appcache为后缀名,添加MIME类型
AddType text/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性manifest=”demo.appcache”,路径要保证正确。

manifest文件格式

1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源,可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退; 后退)换行当被缓存的文件找不到时的备用资源

其它

1、CACHE: 可以省略,这种情况下将需要缓存的资源写在CACHE MANIFEST
2、可以指定多个CACHE: NETWORK: FALLBACK:,无顺序限制

CACHE:需要缓存那些资源.
NETWORK:不需要缓存那些资源,必须在网络下面才能访问.
FALLBACK:当访问不到某个资源时,自动由另外一个资源替换.
CACHE MANIFEST

1
2
3
4
5
6
7
8
9
10
CACHE:
#此部分是需要缓存的资源
1.jpg
js/jquery.min.js
NETWORK:
js/demo.js
# 可以使用 * 替代
FALLBACK:
one.css two.css 会缓存two.css 当找不到one.css 会去找two.css 文件.

3、#表示注释,只有当demo.appcache文件内容发生改变时或者手动清除缓存后,才会重新缓存。
4、chrome 可以通过chrome://appcache-internals/工具和离线(offline)模式来调试管理应用缓存

Font Awesome 字体框架

http://fontawesome.dashgame.com/
Font Awesome 提供可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 多媒体相关的
    1. 1.1. 拖拽
      1. 1.1.1. 拖拽元素
      2. 1.1.2. 目标元素
      3. 1.1.3. 事件监听
        1. 1.1.3.1. 拖拽元素
        2. 1.1.3.2. 目标元素
  2. 2. 历史记录相关
  3. 3. 地理定位
    1. 3.1. 获取地理信息方式
    2. 3.2. 隐私
    3. 3.3. API详解
  4. 4. Web存储
    1. 4.1. 特性
      1. 4.1.1. window.sessionStorage 会话存储
      2. 4.1.2. window.localStorage
    2. 4.2. 方法详解
  5. 5. 全屏
  6. 6. 网络状态
  7. 7. 应用缓存
    1. 7.1. 优势
    2. 7.2. manifest文件格式
    3. 7.3. 其它
  8. 8. Font Awesome 字体框架