• HTML5全屏操作API


    一、定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题

    二、使用:

    ①基本:

    • Node.RequestFullScreen()开启全屏显示
    • Node.CancelFullScreen()关闭全屏显示

    ②由于兼容性的原因(在IE9以下不支持,但是在高级浏览器新版本支持),不同浏览器需要添加不同的私有前缀(在js中也有私有前缀,在方法属性之前加上即可,并且首字母需大写)

    • webkit内核浏览器,如Chrome浏览器:以webkitRequestFullScreen方法实现,谷歌浏览器前缀webkitRequestFullScreen()里最后的Screen的S也可以为小写s,建议写成驼峰命名法
    • gecko内核浏览器,如火狐浏览器:以mozRequestFullScreen方法实现。
    • Trident内核浏览器,如IE浏览器:使用IE时,最后的screen的s为小写,也即msRequestFullscreen,否则无效
    <script>
            // 将浏览器前缀兼容封装成函数
            function toFullVideo() {
                if (videoDom.requestFullscreen) {
                    return videoDom.requestFullScreen();
                } else if (videoDom.webkitRequestFullScreen) {
                    return videoDom.webkitRequestFullScreen();
                } else if (videoDom.mozRequestFullScreen) {
                    return videoDom.mozRequestFullScreen();
                } else {
                    return videoDom.msRequestFullscreen();
                }
            }
     </script>

    ③页面全屏(页面文档全屏)

    document.documentElement.webkitRequestFullScreen()

    ④取消页面全屏(跟元素没有关系)

    document.webkitCancelFullScreen;
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML5全屏操作</title>
        <style>
            .box {
                width: 400px;
                height: 400px;
                background: pink;
            }
        </style>
    </head>
    
    <body>
        <div class="box"></div>
        <button class="btn1">全屏显示</button>
        <button class="btn2">取消全屏</button>
        <script>
            document.querySelector(".btn1").onclick = function () {
                document.documentElement.webkitRequestFullScreen();
            };
            document.querySelector(".btn2").onclick = function () {
                document.webkitCancelFullScreen();
            };
        </script>
    </body>
    </html>

     

  • 相关阅读:
    tomcat 服务器发布网站
    AJAX服务器返回数据 连接数据库查询数据
    MyEclipse jsp 中文乱码
    sql 数据库修复
    jquery checkbox
    Nexus介绍
    navicat for mysql快捷键
    Mysql limit offset用法举例
    tortoiseSVN如何发现和解决冲突?
    maven指定项目的构建、打包和tomcat插件的pom.xml配置
  • 原文地址:https://www.cnblogs.com/EricZLin/p/9256668.html
Copyright © 2020-2023  润新知