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

最新推荐文章于 2023-04-01 19:57:38 发布

impact_factor

最新推荐文章于 2023-04-01 19:57:38 发布

阅读量284

点赞数 1

分类专栏： JavaScript html 文章标签： html5 javascript

本文链接：https://blog.csdn.net/impact_factor/article/details/118418822

版权

JavaScript 同时被 2 个专栏收录

23 篇文章 5 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

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>

<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>

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>

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

强调：浏览器的兼容性

火狐浏览器：

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

IE浏览器：

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

3. 文件读取

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

强调：

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

在这里插入图片描述

<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>

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>

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

impact_factor

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增API的使用——【网络连接、全屏显示、文件读取、地理定位】

HTML5新增API的使用1、HTML5 新增API的使用：(1)检测网络连接的事件(注意浏览器的兼容性)：(2)控制页面元素的全屏显示(注意浏览器的兼容性)(3)文件读取(4)地理定位：Geolocation接口1、HTML5 新增API的使用：(1)检测网络连接的事件(注意浏览器的兼容性)：A、‘online’：网络已连接B、‘offline’：网络已断开(2)控制页面元素的全屏显示(注意浏览器的兼容性)A、webkitRequestFullScreen()方法:谷歌浏览器打开全屏显示B、
复制链接

扫一扫