一、网络监听接口
ononline:网络连接的时候触发的事件;
onoffline:网络断开的时候触发的事件。
二、全屏操作的主要方法和属性
//全屏操作的主要方法:
1.requestFullScreen():开启全屏,不同浏览器需要添加不同的前缀
chrome:webkit firefox:moz ie:ms opera:o
2.cancelFullScreen():退出全屏显示.也需要天加前缀,在不同的浏览器下,退出全屏只能使用document来实现
3.fullScreenElement():是否是全屏状态
2.1 requestFullScreen()开启全屏
- 不同浏览器需要添加不同的前缀:chrome:webkit firefox:moz ie:ms opera:o
- 使用IE时,最后的screen的s为小写,也即msRequestFullscreen,否则无效
- 谷歌浏览器前缀webkitRequestFullScreen()里最后的Screen的S也可以为小写s,建议写成驼峰命名法;
- 将浏览器前缀兼容封装成函数 。
• function toFull(dom){
if(dom.requestFullscreen){
return dom.requestFullscreen();
}else if(dom.webkitRequestFullScreen){
return dom.webkitRequestFullScreen();
}else if(dom.mozRequestFullScreen){
return dom.mozRequestFullScreen();
}else{
return dom.msRequestFullScreen();
}
}
###2.2 cancelFullScreen()退出全屏
退出全屏显示.也需要天加前缀,在不同的浏览器下,退出全屏只能使用document来实现。从全屏状态中退出。目前实现的方法都是 cancelFullScreen() ,而不是标准的 exitFullscreen()。
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}else if (document.msExitFullscreen) {
document.msExiFullscreen();
}else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
}
###2.3 fullScreenElement():是否是全屏状态
function isDocumentInFullScreenMode() {
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
alert(true);
} else {
alert(false);
}
}
三、FileReader的使用
##3.1 FileReader:读取文件内容
- readAsText():读取文本文件(可以使用txt打开的文件),返回的是文本字符串,默认编码是UTF-8
- readAsBinaryString():读取任意类型的文件。返回的是二进制字符串,这个方法不是读取文件并展示的,它是用来存储文件的。例如:读取文件内容,获取二进制数据,传递给后台,后台接受数据之后,将数据存储。
- readAsDataURL():读取文件后获取一段以data开头的字符串,这段字符串的本质是DataURL。DataURL是一种将文件(一般指的是图像或者能够嵌入到文档中的文件格式)嵌入到文档的方案,将资源转换为base64编码的字符串形式,并且将这些内容直接存储在URL中,优化了网站的加载速度和执行效率。
- readAsURL() 没有任何的返回值。但是在读取成功之后,会将读取的结果存储到文件读取对象的reault中
- readAsURL() 需要一个参数:binary large object:文件(图片或者其他可以嵌入到文档的类型)
- 文件存储在file表单元素的files属性中,他是一个数组。
- abort():中断读取。
3.2 FileReader获取数据
FileReader提供一个完整的时事件模型,用来捕获文件读取时候的状态
- onabort:读取文件中断时触发
- onerror:读取文件错误的时候触发
- onload:读取文件成功的时候触发
- onloadend:读取文件完成时候触发(无论是成功还是失败,都会触发)
- onloadstart:开始读取文件时候触发
- onprogress:读取文件过程中持续触发
function getFileContent(){
//1、创建读取文件对象
var reader=new FileReader();
//2、读取文件,获取dataAsURL
var file=document.querySelector("#myFile").files[0];
reader.readAsDataURL(file);
reader.onload=function(){
document.querySelector("img").src=reader.result;
}
}
四、拖拽事件
在h5中,如果想要拖拽元素,必须将为元素添加draggable=“true”,图片和超链接默认就可以拖拽。
- 拖拽元素
ondrag 应用于拖拽元素,整个拖拽过程中都会被调用
ondragstart 应用于拖拽元素开始时候调用。
ondragleave 当鼠标离开拖拽元素时候调用
ondragend 当拖拽结束的时候调用
- 目标元素
ondragenter 应用于目标元素,整个拖拽元素进入时候被调用
ondragover 应用于拖拽元素停留在目标元素上时调用。
ondrop 当在目标元素上松开鼠标时候调用。此时将拖动的元素添加到目标元素中
ondragleave 当鼠标离开目标元素时候调用
注意事项:
- 浏览器默认会阻止ondrop事件,我们必须在在ondragover中阻止浏览器的默认行为
• element.οndragοver=function(e){
//e 是事件参数对象
e.preventDefault();
}
- ondrop 当在目标元素上松开鼠标时候调用。此时将拖动的元素添加到目标元素中
• element.οndrοp=function(){
element.appendChild§;//将拖动的元素添加到目标元素中
}
4.1 dataTransfer
通过dataTransfer来实现数据的存储和获取
element.dataTransfer.setData(format,Data)
- 参数一:format,数据类型,text/html text/uri-list
- 参数二:data,数据,一般指的是字符串值。
- 注意:通过dataTransfer.setData()存储的数据只能在drop事件中获取
五、地理定位接口
navigator.geolocation.getCurrentPosition(success,error,option);
参数1.获取地理信息成功之后的回调
- 如果获取地理信息成功,会将获取到的地理信息传递给成功之后的回调
- position.coords.longitude 经度
- position.coords.latitude 纬度
- position.coords.accuracy 精度
- position.coords.altitude 海拔高度
参数2.获取地理信息失败之后的回调
/*获取定位失败之后的回调*/
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
参数3.调整获取当前地进信息的方式,option:可以设置获取数据的方式
- enableHighAccuracy:true/false:是否使用高精度
- timeout:设置超时时间,单位ms
- maximumAge:可以设置浏览器重新获取地理信息的时间间隔,单位是ms
也可以使用第三方包,百度地图提供的地图开放平台。百度地图开放平台
六、web存储 sessionStorage
sessionStorage的使用:存储数据到本地中,存储的容量在5mb(兆)左右。
- 这个数据的本质是存储在当前页面的内存中;
- 不同浏览器之间不能共享数据,同一个浏览器的不同窗口也不能共享数据;
- 它的生命周期为关闭当前页面,或者是当前页面没有关闭,但是浏览器关闭也会清除
sessionStorage.setItem(key,value) : 存储数据,以键值对的方式存储。
sessionStorage.getItem(key): 获取数据,通过制定名称的key来获取对应的value值。
sessionStorage.removeItem(key):删除数据,通过制定key来删除对应的值。如果key的值没有,也不会报错。
sessionStorage.clear(): 清空所有存储的数据。
七、web存储 localStorage
localStorage的使用:
- 存储的内容大概20mb;
- 不同的浏览器是不能够共享数据的。但是在同一个浏览器的不同窗口,可以共享数据;
- 永久生效,他的数据是存储在硬盘上的,并不会随着页面或者浏览器的关闭而清除,如果想清除,必须手动remove(key)
localStorage.setItem(key,value) : 存储数据,以键值对的方式存储。
localStorage.getItem(key): 获取数据,通过制定名称的key来获取对应的value值。
localStorage.removeItem(key):删除数据,通过制定key来删除对应的值。如果key的值没有,也不会报错。
localStorage.clear(): 清空所有存储的数据。
八、应用缓存
- 概念:使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本
- 优势:
a) 可配置需要缓存的资源
b) 网络无连接应用仍可用
c) 本地读取缓存资源,提升访问速度,增强用户体验
d) 减少请求,缓解服务器负担 - Cache Manifest 基础:
a) 如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性:
<html manifest="demo.appcache">
...
</html>
b) 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
c) manifest 文件的建议的文件扩展名是:".appcache"。
d) 注意,manifest 文件需要配置正确的 MIME-type,即 “text/cache-manifest”。必须在 web 服务器上进行配置,在inetmgr中有MIME TYPE ,设置即可。
demo.appcache:
CACHE MANIFEST
#上面一句代码必须是当前文档的第一句,即使第一句是注释也不行,必须保证在第一行。
#后面写注释
#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表
../images/l1.jpg
../images/l2.jpg
# *:代表所有文件
#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
../images/l3.jpg
#配置如果文件无法获取则使用指定的文件进行替代
FALLBACK:
../images/l4.jpg ../images/banner_1.jpg
# /:代表所有文件,比如如果任何文件找不到的时候,用banner_1.jpg来代替: / ../images/banner_1.jpg
九、自定义视频、音频
- 常用方法:load() 加载、 play() 播放、 pause() 暂停
jquery没有提供对视频播放控件的方式,也就意味着如果要操作视频播放,必须使用原生的js方法—dom元素 - 常用属性:
a) currentTime 视频播放的当前进度、
b) duration:视频的总时间 100000/60
c) paused:视频播放的状态. - 常用事件:
a) oncanplay: 事件在用户可以开始播放视频/音频(audio/video)时触发。
b) ontimeupdate:通过该事件来报告当前的播放进度.
c) onended:播放完时触发—重置