HTML5新增API的使用——【网络连接、全屏显示、文件读取、地理定位】_html5 wifi api

作者：菜鸟追梦旅行 | 2024-02-29 03:53:52

踩

html5 wifi api

HTML5新增API的使用

1. 检测网络连接的事件(注意浏览器的兼容性)：

(1) ‘online’：网络已连接
在这里插入图片描述

(2) ‘offline’：网络已断开

在这里插入图片描述

<style>
    body{
        margin: 0;
        padding: 0;
        background-color: #f7f7f7;
    }

    p{
        width: 200px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        margin: 0 auto;
        color: #fff;
        font-size: 24px;
        background-color: #000;
        display: none;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<body>
    <p class="tips"></p>
    <script>
        window.addEventListener('online',function(){
            $('.tips').text('网络已连接').fadeToggle(500).delay(1000).fadeToggle();
        })

        window.addEventListener('offline',function(){
            $('.tips').text('网络已断开').fadeIn(500).delay(1000).fadeOut();
        })

    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13

2. 控制页面元素的全屏显示(注意浏览器的兼容性)

webkitRequestFullScreen()方法:谷歌浏览器打开全屏显示
webkitCancelFullScreen()方法：谷歌浏览器关闭全屏显示
webkitIsFullScreen()方法：判断谷歌浏览器是否全屏

<body>
    <div>
        <img src="./fan.jpg" alt="" width="400" height="500">
        <br><br>
        <button id="full">全屏显示</button>
        <button id="cancelfull">取消全屏</button>
        <button id="isfull">是否全屏</button>
    </div>
    <script>
        var div = document.querySelector('div');
 
        document.querySelector('#full').onclick = function () {
            if (div.requestFullscreen) {
                div.requestFullscreen();
            } else if (div.webkitRequestFullScreen) {
                div.webkitRequestFullScreen();
                // div.webkitRequestFullRequest();
            }
        }

        document.querySelector('#cancelfull').onclick = function () {
            if (document.cancelFullscreen) {
                document.cancelFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
        }

        document.querySelector('#isfull').onclick = function () {
            alert(document.webkitIsFullScreen)
        }
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

实现效果：
在这里插入图片描述

强调：浏览器的兼容性

火狐浏览器：

mozRequestFullScreen()方法：火狐浏览器打开全屏显示
mozCancelFullScreen()方法：火狐浏览器关闭全屏显示
mozIsFullScreen()方法：判断火狐浏览器是否全屏

IE浏览器：

msRequestFullScreen()方法：IE浏览器打开全屏显示
msCancelFullScreen()方法：IE浏览器关闭全屏显示
msIsFullScreen()方法：判断IE浏览器是否全屏

3. 文件读取

FileReader：读取本地文件
File 对象：读取文件的内容
DataTransfer 对象：拖放文件的对象

强调：

 
  <input type="file" multiple>
  <!-- multiple属性表示可以选择多个文件-->
  
1
2
3
4

在这里插入图片描述

<input type="file" multiple>：会返回一个FileList对象(文件列表)对象保存在files属性中，可以通过索引的方式访问该对象中所有元素，FileList对象(文件列表)中存放的是File对象(文件对象)，每个File对象中有三个常用属性：

属性名	解释
name	文件名
size	文件的大小(以字节为单位)
type	文件的类型

onchange事件：当用户选择文件发生改变时触发

<body>
    <input type="file">
    <img src="" alt="" width="350" height="260">
    <script>
        var file = document.querySelector('input');
        var img = document.querySelector('img');
        file.onchange = function () {//当'file'控件发生变化时触发该事件
            //1.创建FileReader对象
            var reader = new FileReader();
            //2.读取文件为文本
            reader.readAsDataURL(this.files[0]);//读取第一个文件内容为文本格式
            //3.注册onload事件，将文件的内容放入img中
            reader.onload = function () {
                img.src = this.result;//this代表reader
            }
        }
    </script>
</body>    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

FileReader的使用方法：

创建FileReader对象：new FileReader()
使用该对象的相关方法来读取文件

readAsBinaryString(file)：将文件读取为二进制编码

readAsText(file,[encoding])：将文件读取为文本

readAsDataURL(file)：将文件读取为DataURL方式(读取图片的缩略图)

abort()：中断读取操作
访问该对象的result属性得到读取结果
文件读取的常用事件：

onload：读取成功时触发

onloadend：文件读取完成时触发(无论读取是否成功)

onerror：读取错误时触发

onabort：读取中断时触发

4. 地理定位：Geolocation接口

使用浏览器内置对象：navigator.geolocation
getCurrentPosition()方法：调用该方法时会发起一个异步请求，浏览器调用底层的硬件来获取当前的位置信息

<body>
    <p id="demo"></p>
    <button onclick="getLocation()">获取位置信息</button>
    <script>
        var x = document.getElementById('#demo');

        function getLocation(){
            if(navigator.geolocation){//如果当前浏览支持地理定位
                navigator.geolocation.getCurrentPosition(successCallBack,errorCallBack)
            }else{
                x.innerHTML = '当前浏览器不支持地理定位';
            }
        }

        function successCallBack(position){//获取地理位置成功后的回调函数
            x.innerHTML = '纬度：'+position.coords.latitude+'<br>'+'经度：'+position.coords.longitude;
        }
        function errorCallBack(error){//获取地理位置成功后的回调函数
            switch(error.code){
                case error.PERMISSION_DEFINED:
                    x.innerHTML = '用户拒绝地理请求';
                    break;
            }
        }
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述
例子是一个非常基础的地理定位脚本，不含错误处理。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/163582