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

　　

HTML5--浏览器全屏操作、退出全屏、是否全屏的更多相关文章

  1. HTML5全屏操作API

    一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...

  2. js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...

  3. 微信video标签全屏无法退出bug 本文系转载

    安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...

  4. 微信video标签全屏无法退出bug

    安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...

  5. JS实现元素的全屏、退出全屏功能

     在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas.所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen.exitFullScr ...

  6. div的全屏与退出全屏

    div的全屏与退出全屏 作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...

  7. android开发：全屏和退出全屏

    android开发:全屏和退出全屏 from://http://blog.csdn.net/dyllove98/article/details/8831933 2013-04-21 20:31 413 ...

  8. QT5中全屏显示子窗口和取消全屏的方法

    问题描述:用QT5做了个MDI多窗体应用程序,想把子窗体全屏显示,用网上的方法,但总是遇到问题. 网上的解决方法原文在这:http://www.cnblogs.com/Rick-w/archive/2 ...

  9. [转载]从MyEclipse到IntelliJ IDEA-让你摆脱鼠标，全键盘操作

    从MyEclipse转战到IntelliJ IDEA的经历 注转载址:http://blog.csdn.net/luoweifu/article/details/13985835 我一个朋友写了一篇“ ...

随机推荐

  1. Photoshop制作Android UI:怎样从大图片中准确剪切出圆角正方形 图片

    如题所看到的,最初我是直接用PS的剪切工具,但发现有时不太好用. 由于你必须提前设好要剪切的尺寸. 也可能是我这小白不知道咋用. 下为摸索到的最好方法: 1.打开原图.新建图层,假设是png图片就不用 ...

  2. C# log4net 日志写入到数据库

    原文:C# log4net 日志写入到数据库 效果图: 1:第一步创建SQL表结构   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  3. asp.net 获取表单中控件的值

    原文:https://blog.csdn.net/happymagic/article/details/8480235   C# 后台获取前台 input 文本框值.(都是以控件的Name来获取) s ...

  4. python学习笔记(7): 面向对象

    class Foo: #类中的函数 def bar(self): #功能阐述 print('Bar') pass def hello(self,name): print('i am %s' %name ...

  5. python学习笔记(6)关键字与循环控制

    一.变量和类型 1.基本变量类型 (1)整数 (2)浮点数 (3)字符串 (4)布尔值 (5)空值 (6)函数 (7)模块 (8)类型 (9)自定义类型 print(type()) print(typ ...

  6. 20191202IIS

    IIS和.netfw4.0安装顺序是从前到后,如果不小心颠倒了,无所谓. 打开程序-运行-cmd:输入一下命令重新注册IIS C:\WINDOWS\Microsoft.NET\Framework\v4 ...

  7. 本地局域网MySQL数据库连接方法（Navcat权限设置）

    情景: 当同一局域网环境中,需要协同开发并涉及到本地数据库互联情况,有关权限需要开放! 设置流程: 1.受访端连接 打开Navcat>>>>点击本地数据库>>> ...

  8. HTML替换元素,非替换元素和控制元素

    替换元素:元素内容由标签的属性来设置,标签其实就是一个占位符.替换元素因为元素内容来自外部资源,所以这些标签大多具有src,指明要引入的资源路径,所以大多仅需要一个标签就可以.例如:<link ...

  9. 小程序Page里的函数比app.js先执行的解决办法

    问题描述: 当我们初始化一个小程序时,默认文件 app.js 中有onLaunch函数, onLaunch: function () { console.log("onLaunch" ...

  10. CSS3选择器 ::before和::after

    :before和:after伪元素的用法 :before和:after伪元素的用法十分简单:下面的代码样例中, :before 和 :after 将会在 blockquote 元素之前和之后插入新内容 ...