HTML5接口

最新推荐文章于 2022-11-03 10:22:45 发布

yyy_wj

最新推荐文章于 2022-11-03 10:22:45 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/yyy_wj/article/details/100764633

版权

一、网络监听接口

网络联通是触发这个事件，只与当前页面有关（window）

1、window.online用户网络连接时被调用

2、window.offline用户网络断开时被调用

<script>
    /*1.ononline:网络连通的时候触发这个事件*/
    window.addEventListener("online",function(){
        alert("网络连通了");
    });

    /*2.onoffline:网络断开时触发*/
    window.addEventListener("offline",function(){
        alert("网络断开了");
    })
</script>

二、全屏接口

1、requestFullScreen():开启全屏显示

1.1 不同浏览器需要添加不同的前缀

1.2 chrome:webkit firefox:moz ie:ms opera:o

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

3、fullScreenElement:是否是全屏状态，也只能使用document进行判断（返回true或false）

案例：对一张图进行全屏显示，退出全屏和判断是否全屏

<body>
<div>
    <img src="../images/l1.jpg" alt="">
    <input type="button" id="full" value="全屏">
    <input type="button" id="cancelFull" value="退出全屏">
    <input type="button" id="isFull" value="是否全屏">
</div>
<script>
        window.onload=function(){
        var div=document.querySelector("div");
        /*添加三个按钮的点击事件*/
        /*全屏操作*/
        document.querySelector("#full").onclick=function(){
            /*div.requestFullScreen();*/
            /*div.webkitRequestFullScreen();*/
            /*div.mozRequestFullScreen();*/
            /*使用能力测试添加不同浏览器下的前缀*/
            if(div.requestFullScreen){
                div.requestFullScreen();
            }
            else if(div.webkitRequestFullScreen){
                div.webkitRequestFullScreen();
            }
            else if(div.mozRequestFullScreen){
                div.mozRequestFullScreen();
            }
            else if(div.msRequestFullScreen){
                div.msRequestFullScreen();
            }
        }

        /*退出全屏*/
        document.querySelector("#cancelFull").onclick=function(){
            if(document.cancelFullScreen){
                document.cancelFullScreen();
            }
            else if(document.webkitCancelFullScreen){
                document.webkitCancelFullScreen();
            }
            else if(document.mozCancelFullScreen){
                document.mozCancelFullScreen();
            }
            else if(document.msCancelFullScreen){
                document.msCancelFullScreen();
            }
        }

        /*判断是否是全屏状态*/
        document.querySelector("#isFull").onclick=function(){
            /*两个细节：使用document判断  能力测试*/
            if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
                alert(true);
            }
            else{
                alert(false);
            }
        }
    }
</script>
</body>

三、读取文件内容

FileReader:读取文件内容

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

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

3、readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.

3.1、DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。

3.2、DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率

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

onabort:读取文件中断片时触发
onerror:读取错误时触发
onload:文件读取成功完成时触发
onloadend:读取完成时触发，无论成功还是失败
onloadstart:开始读取时触发
onprogress:读取文件过程中持续触发

示例：从本地选一张图片做到及时预览的效果

1、展示图片：
src:指定路径(资源定位--url):src请求的是外部文件，一般来说是服务器资源。意味着它需要向服务器发送请求，它占用服务器资源
<img src="../images/l1.jpg" alt="">

2、需求：即时预览：
2.1、即时：当用户选择完图片之后就立刻进行预览的处理 >>onchange（结合onchange事件）
2.2、预览：通过文件读取对象的readAsDataURL()完成

使用FileReader()获取DataURL

该函数需要注意：
没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中
需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型)
文件存储在file表单元素的files属性中，它是一个数组

 <style>
     div{
         height: 20px;
         width: 0%;
         background-color:red;
        }
 </style>
<body>
<form action="">
    文件： <input type="file" name="myFile" id="myFile" onchange="getFileContent();"> <br>
    <div></div>
    <input type="submit">
</form>
<img src="" alt="">
<script>
    var div=document.querySelector("div");
    * abort():中断读取*/
    function getFileContent(){
       /*1.创建文件读取对象*/
        var reader=new FileReader();
        /*2.读取文件，获取DataURL
        var file=document.querySelector("#myFile").files;
        reader.readAsDataURL(file[0]);
        /*获取数据*/
        reader.onload=function(){
            /*展示*/
            document.querySelector("img").src=reader.result;
        }
        reader.onprogress=function(e){
            var percent= e.loaded/ e.total*100+"%";
            div.style.width=percent;
        }
    }
</script>
</body>

四、拖拽接口

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

1、应用于被拖拽元素的事件

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

2、应用于目标元素的事件

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

注意：浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为--------e.preventDefault()

3、通过dataTransfer来实现数据的存储与获取

setData(format,data):
format:数据的类型：textml text/uri-list
Data:数据:一般来说是字符串值

示例：拖拽接口的通用

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: relative;
            margin-left:20px;
            float: left;
        }
        .div2{
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            position: relative;
            margin-left:20px;
            float: left;
        }
        .div3{
            width: 200px;
            height: 200px;
            border: 1px solid green;
            position: relative;
            margin-left:20px;
            float: left;
        }
        p{
            background-color: orange;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="div1" id="div1">
    <!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽-->
    <p id="pe" draggable="true">试着把我拖过去</p>
    <p id="pe1" draggable="true">试着也把我拖过去</p>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<script>
    /*学习拖拽，主要就是学习拖拽事件*/
    var obj=null;//当前被拖拽的地元素
    document.ondragstart=function(e){
        /*通过事件捕获来获取当前被拖拽的子元素*/
        e.target.style.opacity=0.5;
        e.target.parentNode.style.borderWidth="5px";
        obj= e.target;
        /*通过dataTransfer来实现数据的存储与获取
        * setData(format,data):
        * format:数据的类型：text/html   text/uri-list
        * Data:数据:一般来说是字符串值*/
        e.dataTransfer.setData("text/html", e.target.id);
    }
    document.ondragend=function(e){
        e.target.style.opacity=1;
        e.target.parentNode.style.borderWidth="1px";
    }
    document.ondragleave=function(e){
    }
    document.ondrag=function(e){
    }

    document.ondragenter=function(e){
        console.log(e.target);
    }
    document.ondragover=function(e){
        /*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/
        e.preventDefault();
    }
    /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/
    document.ondrop=function(e){
        /*添加元素*/
        /*通过e.dataTransfer.setData存储的数据，只能在drop事件中获取*/
        var id=e.dataTransfer.getData("text/html");
        e.target.appendChild(document.getElementById(id));
    }
    document.ondragleave=function(e){
    }
</script>
</body>

五、应用缓存接口

sessionStorage：存储数据到本地。存储的容量5mb左右。
1.这个数据本质是存储在当前页面的内存中-意味着其它页面和浏览器无法获取数据
2.它的生命周期为关闭当前页面，关闭页面，数据会自动清除

方法：

setItem(key,value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容

<body>
<input type="text" id="userName"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<script>
    /*存储数据*/
    document.querySelector("#setData").onclick=function(){
        /*获取用户名*/
        var name=document.querySelector("#userName").value;
        /*存储数据*/
        window.sessionStorage.setItem("userName",name);
    }
    /*获取数据*/
    document.querySelector("#getData").onclick=function(){
        /*如果找不到对应名称的key,那么就会获取null*/
        var name=window.sessionStorage.getItem("userName");
        alert(name);
    }
    /*删除数据*/
    document.querySelector("#removeData").onclick=function(){
        /*在删除的时候如果key值错误，不会报错，但是也不会删除数据*/
        window.sessionStorage.removeItem("userName1");
    }
</script>
</body>

localStorage的使用：
1.存储的内容大概20mb
2.不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据
3.永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除.如果想清除，必须手动清除

方法

setItem(key,value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容

<input type="text" id="userName"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">

<script>
    document.querySelector("#setData").onclick=function(){
        var name=document.querySelector("#userName").value;
        /*使用localStorage存储数据*/
        window.localStorage.setItem("userName",name);
    }
    /*获取数据*/
    document.querySelector("#getData").onclick=function(){
        var name=window.localStorage.getItem("userName");
        alert(name);
    }
    /*清除数据*/
    document.querySelector("#removeData").onclick=function(){
        window.localStorage.removeItem("userName");
    }
</script>
</body>

H5应用程序缓存

优势：

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

manifest = " 应用程序缓存清单文件的路径，建议文件的扩展名是appcache，这个文件的本质是一个文本文件"

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

manifest 文件可分为以下部分

开始

CACHE MANIFEST

CACHE

在此标题下列出的文件将在首次下载后进行缓存

/theme.css

/logo.gif

/main.js

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的

NETWORK

在此标题下列出的文件需要与服务器的连接，且不会被缓存
NETWORK 小节规定文件 “login.asp” 永远不会被缓存，且离线时是不可用的

NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的，如：

NETWORK:

FALLBACK

在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
FALLBACK 小节规定如果无法建立因特网连接，就使用指定的资源代替所请求的url的资源

FALLBACK:

/html5/ /404.html

注意：当html5资源在离线状态下无法请求的时候，就使用404.html代替

注意：

CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制
#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

更新缓存：

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使修改了服务器上的文件。为了确保浏览器更新缓存，也需要更新 manifest 文件，也就意味着一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存
说明：更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法

六、地理接口

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

API说明：
navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标)
position.coords.latitude纬度
position.coords.longitude经度
当获取地理信息失败后，会调用errorCallback，并返回错误信息error
可选参数 options 对象可以调整位置信息数据收集方式

yyy_wj

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML5接口

一、网络监听接口网络联通是触发这个事件，只与当前页面有关（window） 1、window.online用户网络连接时被调用 2、window.offline用户网络断开时被调用<script> /*1.ononline:网络连通的时候触发这个事件*/ window.addEventListener("online",f...
复制链接

扫一扫