HTML5之常见API

最新推荐文章于 2024-08-16 10:59:26 发布

风筝风筝等等我

最新推荐文章于 2024-08-16 10:59:26 发布

阅读量1k

点赞数

文章标签： HTML5

本文链接：https://blog.csdn.net/a1k2l45k/article/details/80552246

版权

全屏

HTML5规范允许自定义网页上任意元素全屏显示

全屏API提供的一些常见方法：

requestFullscreen() //开启全屏显示

cancelFullscreen() //关闭全屏显示

在不同的浏览器中需要添加前缀（兼容性问题）
谷歌浏览器：webkitRequestFullscreen() 、webkitCancelFullscreen()
火狐浏览器：mozRequestFullscreen() 、mozCancelFullscreen()

document.fullscreen 检测当前是否处于全屏
谷歌浏览器：webkitIsFullscreen()
火狐浏览器：mozFullscreen()

全屏伪类

：full-screen{}
：webkit-full-screen{} 谷歌浏览器
：moz-full-screen{} 火狐浏览器

兼容性写法

//section是选中节点
if(section.requestFullscreen)
{
    section.requestFullscreen();
}
else if(section.webkitRequestFullScreen())
{
    section.webkitRequestFullScreen();
}
else if(section.mozRequestFullScreen)
{
    section.mozRequestFullScreen();
}

web存储

特点：

设置、读取数据方便
容量较大
只能存储字符串

window.sessionstorage（约5M）

特点：生命周期为一个网页的打开与关闭；在同一个窗口下，数据可以共享

window。localstorage（约20M）

特点：永久有效、除非手动删除；可以由多个窗口共享

方法详解（两种存储方式通用）

setItem(key,value)  //设置存储内容
getItem(key)  //读取存储内容
removeItem(key)  //删除指定存储内容
clear()  //清空存储内容

网络状态

通过widow.online、window.offline来控制

可以为window添加一个事件

window.addEventListener("online",function());
window.addEventListener("offline",function());

需注意：要是一开始就是断网或者联网，则函数不会执行

拖拽

方式：可以通过设置draggable=”true”来是元素可以进行拖拽，链接、图片默认是开启的。

拖拽元素：draggable=”true”的元素

目标元素：页面中任意一个元素都可以是目标元素

事件监听

拖拽元素：

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

目标元素：

ondragenter //拖拽元素进入目标元素时调用
ondragover //拖拽元素停留在目标元素上时调用
ondrop //在目标元素上松开鼠标时调用

注意：

selector.ondragover=function(e){
    e.preventDefault();
}
//拖拽时必用

应用缓存

优势：

可配置需要缓存的资源
无网络情况下仍可使用应用
本地读取缓存资源，提升访问速度
减少请求，缓解服务器负担
可以轻松的构建一个离线应用

使用方式

构建一个文本文件以.appcache结尾，然后在html标签中引用

<html manifest="文件路径">
</html>

文件书写格式

顶行写CACHE MANIFEST
CACHE：指定我们需要缓存的静态资源，img、js、css
NETWORK：需要我们联网才能访问的文件
FALLBACK：当页面无法访问时返回的页面，比如404.html

地理定位

HTML5提供了获取地理信息的API，这使得我们可以基于用户地理位置开发互联网应用。

获取用户地理位置的几种方式

IP地址（用于城市，代价比较大）
GPS（比较精确）
WIFI（在室内）
自定义数据（用户自己输入地理位置）

使用方式

            if(window.navigator.geolocation)
            {
                navigator.geolocation.getCurrentPosition(successCallBack,errorCallBack);
            }
            else{
                console.log("error");
            }
            function successCallBack(position)
            {
                var wd=position.coords.latitude;
                var jd=position.coords.longitude;
                console.log(wd+"-------------------"+jd);
            }
            function errorCallBack(error){  
                console.log("wrong");
            }