html5

网络监听接口

ononline:网络接通时触发这个事件

onoffline:网络断开时触发这个事件

全屏接口

requestFullScreen():开启全屏显示(不同浏览器需要添加不同的前缀)

cancelFullScreen():退出全屏显示(在不同的浏览器下也要添加前缀,只能使用document来实现)

fullScreenElement():是否是全屏状态(在不同的浏览器下也要添加前缀,也只能使用document进行判断)

FileReader( 读取文件内容 )的使用

readAsText():读取文本文件(可以使用Txt打开的文件),返回文本字符串,默认编码是UTF-8

readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看,而是存储文件。例如:读取文件的内容,获取二进制数据,传递给后台,后台接收了数据之后,再将数据存储

readAsDataURL():读取文件获取一段以data开头的字符串,这段字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式,并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率

FileReader提供一个完整的事件模型,用来捕获读取文件时的状态

       onabort:读取文件中断片时触发

       onerror:读取错误时触发

       onload:文件读取成功完成时触发

       onloadend:读取完成时触发,无论成功还是失败

       onloadstart:开始读取时触发

       onprogress:读取文件过程中持续触发

拖拽接口

在h5中,如果想拖拽元素,就必须为元素添加draggable="true",图片和超链接默认就可以拖拽

应用于被拖拽元素的事件

    ondrag            应用于拖拽元素,整个拖拽过程都会调用--持续的触发

    ondragstart    应用于拖拽元素,当拖拽开始时调用

    ondragleave   应用于拖拽元素,当鼠标离开拖拽元素时调用

    ondragend      应用于拖拽元素,当拖拽结束时调用

应用于目标元素的事件

    ondragenter   应用于目标元素,当拖拽元素进入时调用

    ondragover    应用于目标元素,当停留在目标元素上时调用

    ondrop           应用于目标元素,当在目标元素上松开鼠标时调用

    ondragleave    应用于目标元素,当鼠标离开目标元素时调用

注:浏览器默认会阻止ondrop事件,我们必须在ondragover中阻止浏览器的默认行为

event.preventDefault() 该方法将通知 Web 浏览器不要执行与事件关联的默认动作

DataTransfer:在进行拖放操作时,DataTransfer 对象用来保存,通过拖放动作,拖动到浏览器的数据。它可以保存一项或多项数据、一种或者多种数据类型

地理定位接口

 1.获取地理信息成功之后的回调

 2.获取地理信息失败之后的回调

 3.调整获取当前地进信息的方式

navigator.geolocation.getCurrentPosition(success,error,option);

option:可以设置获取数据的方式

enableHighAccuracy:true/false:是否使用高精度

timeout:设置超时时间,单位ms

maximumAge:可以设置浏览器重新获取地理信息的时间间隔,单位是ms

position.coords.latitude 纬度

position.coords.longitude 经度

position.coords.accuracy 精度

position.coords.altitude 海拔高度

sessionStorage的使用

sessionStorage存储数据到本地。存储的容量5mb左右

    1.这个数据本质是存储在当前页面的内存中-意味着其它页面和浏览器无法获取数据

    2.它的生命周期为关闭当前页面,关闭页面,数据会自动清除

setItem(key,value):存储数据,以键值对的方式存储

getItem(key):获取数据,通过指定名称的key获取对应的value值

removeItem(key):删除数据,通过指定名称key删除对应的值

clear():清空所有存储的内容

localStorage的使用

    1.存储的内容大概20mb

    2.不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据

    3.永久生效,它的数据是存储在硬盘上,并不会随着页面或者浏览器的关闭而清除.如果想清除,必须手动清除

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容