HTML5新增API

c1400612901

已于 2023-04-04 21:17:44 修改

阅读量1.4k

点赞数

文章标签： html5 javascript 前端

于 2022-06-27 11:23:54 首次发布

本文链接：https://blog.csdn.net/c1400612901/article/details/125480631

版权

HTML5新增API

摘要由CSDN通过智能技术生成

1.网络状态

我们可以通过window.navigator.onLine来检测，用户当前的网络状态，返回一个布尔值，但是不同浏览器会存在差异

所以HTML5给我们提供了2个事件 online 和 offline

online用户网络连接时被调用

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

他们监听的对象都是window

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络状态</title>
    <script src="js/jQuery_min.js"></script>
    <style>
        .tips {
     
            width: 200px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: #000;
            font-size: 24px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <p class="tips"></p>

</body>

</html>

<script>
    // 通过 window.navigator.onLine 来检测网络是否可用过
    console.log(window.navigator.onLine);
    // 1. 当网络连接的时候， 弹出 p 显示网络已连接 然后消失
    window.addEventListener('online', function () {
     
        $('.tips').text('网络已连接').fadeIn(500).delay(1000).fadeOut();
    })
    // 2. 当网络断开的时候， 弹出 p 显示网络已断开 然后消失
    window.addEventListener('offline', function () {
     
        $('.tips').text('网络已断开').fadeIn(500).delay(1000).fadeOut();
    })

</script>

2.全屏

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

Node.requestFullScreen()开启全屏显示
Node.cancelFullScreen()关闭全屏显示

由于其兼容性原因，不同浏览器需要添加前缀，如：

webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如谷歌浏览器

Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器

ms 微软 msRequestFullscreen

3、document.webkitIsFullScreen、document.mozFullScreen

全屏伪类选择器也有兼容性问题需要添加前缀

:full-screen{}、:-webkit-full-screen{}、:moz-full-screen{}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏</title>
    <style>
        div:-webkit-full-screen {
        /* 注意兼容性问题 */
            background-color: pink;
        }
    </style>
    <script src="js/jQuery_min.js"></script>
</head>

<body>
    <div>
        <img src="../images/t0100714605ba9621e2.jpg" alt="">
        <button id="full">全屏显示</button>
        <button id="cancelFull">取消全屏</button>
        <button id="isFull">是否全屏</button>
    </div>
</body>

</html>

<script>
    // 全屏显示可以是任意元素
    // H5 API 存在兼容性问题 ie9+ 
    // 即使高版本浏览器也有兼容性问题
    // 不同浏览器需要添加不同前缀 webkit moz o ms
    var div = document.querySelector('div');
    // 1. 点击全屏显示
    document.querySelector('#full').addEventListener('click', function () {
     
        div.webkitRequestFullScreen();
    })
    // 能力检测 做一个兼容性的解决方法
    if (div.requestFullScreen) {
       // 正常浏览器
        div.requestFullscreen();
    } else if (div.webkitRequestFullScreen) {
       // webkit 内核
        div.webkitRequestFullScreen();
    } else if (div.mozRequestFullScreen) {
         // moz 内核
        div.mozRequestFullScreen();
    } else if (div.msRequestFullscreen) {
         // ms 微软  这里面有个坑别掉进去了 
        div.msRequestFullscreen();         // ms 里面这样写 msRequestFullscreen() s是小写的
    } else {
       // o 欧朋
        div.oRequestFullScreen();
    }

    // 2. 取消全屏 跟元素没有关系 跟 document 
    document.querySelector('#cancelFull').addEventListener('click', function () {
     
        document.webkitCancelFullScreen();
    })

    // 3. 是否全屏显示
    document.querySelector('#isFull').addEventListener('click', function () {
     
        alert(document.webkitIsFullScreen)  // webkit是否存在全屏状态
    })

</script>

3.文件读取

我们想：可以把上传的文件内容显示到页面上或者上传完图片显示缩略图到页面上…

通过FileReader对象我们可以读取本地存储的文件，使用File对象来指定所要读取的文件或数据。其中Flie对象来自用户在一个元素上选择文件后返回的FileList对象，也可以来自由施放操作生成的DateTransfer

3.1 Files对象

HTML5 新增内建对象，可以读取本地文件内容。

var reader = new FileReader;可以实例化一个对象

实例方法

1、readAsDataURL()以DataURL形式读取文件

事件监听

onload当文件读取完成时调用

属性

result文件读取结果

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件读取</title>
</head>
<body>
    <input type="file" name="" id="" multiple>
    <!-- <div>123</div> -->
    <img src="" alt="">
</body>
</html>

<script>
    // 我们想：可以把上传的文件内容显示到页面上或者上传完图片显示缩略图到页面上..
    // 1. 上传我们的文件 借助于 文件域 input file 
    var file = document.querySelector('input')
    // var div = document.querySelector('div');
    var img = document.querySelector('img');
    file.addEventListener('change', function() {
      // change 当发生改变的时候 下拉菜单 select 也是这个事件
        // console.log(file);
        // for (var k in file) {
     
        //     // console.log(k);
        //     // console.log(k + '~~~~' + file[k]);
        // }
        // console.log(this.files); // 上传文件的集合  可以是一个文件也可以是多个文件

        // 2. 选择我们要的文件 进行读取 fileReader  文件里面的内容
        // 实例化了一个reader对象
        var reader = new FileReader();
        // 读取  文件里面的内容
        // console.log(this);
        // reader.readAsText(文件对象);
        // reader.readAsText(this.files[0]);  // 文本类文件
        reader.readAsDataURL(this.files[0]); // 图片类文件
        // 当这个文件的内容读取完毕之后, 会把内容存放到 result里面
        reader.addEventListener('load', function() {
     
            // console.log(this.result);
            // 把生成的内容 赋值给 img src
            img.src = this.result;
        })
    })
    

    // 3. 把读取的内容显示到页面中...
</script>

另一个版本文件上传

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .file,
        .text {
     
            width: 72vw;
            height: 3vw;
            line-height: 3vw;
            margin: 10px auto;
        }

        .text {
     
            color: #fff;
            text-shadow: 1px 1px 2px #000;
            font-size: 20px;
            text-align: center;
            background-color: #2196F3;
            letter-spacing: 4px;
        }

        div.main {
     
            display: grid;
            width: 72vw;
            grid-template-columns: repeat(5, 1fr);
            grid-gap: 24px;
            background-color: #2196F3;
            margin: 36px auto;
            padding: 24px;
        }

        div.main span {
     
            overflow: hidden;
            width: auto;
            max-width: 100%;
            height: 14vw;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 6px;
        }

        div.main span img,
        video {
     
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: blur(12px);
            transition: all 1.2s;
        }

        .in {
     
            filter: blur(0px)!important;
        }
    </style>
</head>

<body>
    <div class="file">
        <input type="file" multiple>
    </div>
    <div class="text"></div>
    <div class="main"></div>
</body>

</html>

<script>
    let file = document.querySelector('input');
    let img = document.querySelectorAll('img');
    let main = document.querySelector('.main');
    let text = document.querySelector('.text');
    file.addEventListener('change', function () {
     
        // console.dir(this);
        // console.log(this.files);
        let src;
        for (let i = 0; i < this.files.length; i++) {
     
            // 创建 src
            src = URL.createObjectURL(this.files[i]);
            if (this.files[i].type.includes('image')) {
     
                createEle(main, src, 'img');
            }
            if (this.files[i].type.startsWith('video')) {
     
                createEle(main, src, 'video');
            }
        }
    })
    document.addEventListener('change',