专栏首页eadelaHTML5--浏览器全屏操作、退出全屏、是否全屏

HTML5--浏览器全屏操作、退出全屏、是否全屏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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>
    /*全屏操作的主要方法和属性
    * 1.requestFullScreen():开启全屏显示
    *   不同浏览器需要添加不同的前缀
    *   chrome:webkit   firefox:moz   ie:ms   opera:o
    * 2.cancelFullScreen():退出全屏显示:也添加前缀,在不同的浏览器下.退出全屏只能使用document来实现
    * 3.fullScreenElement:是否是全屏状态,也只能使用document进行判断*/

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vuejs基础-事件修饰符

    eadela
  • jQuery基础--jQuery特殊属性操作

    区别:html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。

    eadela
  • jQuery基础--创建节点和 添加节点

    eadela
  • MVC中实现加载更多

    需要实现的功能: 数据太多想初次加载部分数据,在底部加上“加载更多”按钮 点击后加载第二页数据(从数据库只取指定页数据)后接在已有数据后面(类似于android...

    欢醉
  • flask 分页用法(flask 63)

    from flask import Blueprint,render_template,request,current_app from flask_logi...

    用户5760343
  • HTML节点操作

    HTML节点的基本操作,添加节点,替换节点,删除节点,绑定事件,访问子节点,访问父节点,访问兄弟节点。 文档对象模型Document Object Model...

    WindrunnerMax
  • echarts插件-从后台请求的数据在页面显示空白的问题

    最近的项目里面关于统计图方面的问题,有涉及到很多,也在博客里面更新了自己所遇到的问题,开发过程中会遇到很多问题,解决技术问题的方法也有千千万

    王小婷
  • CSS样式更改篇——背景Background

    上篇文章主要讲述了CSS的基础用法,讲述了如何定义头文件,导入CSS文件,id和class选择器,元素选择器,后代选择器,子元素选择器,兄弟选择器,伪类选择器等...

    前端皮皮
  • React高阶组件(译)

    本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 原文:https://daveceddia.com/extra...

    IMWeb前端团队
  • React高阶组件(译)

    原文:https://daveceddia.com/extract-state-with-higher-order-components/

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券