<!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. VS2015-MFC基础教程-应用程序工程中文件的组成结构

    VS2015应用程序向导生成框架程序后,我们可以在之前设置的Location下看到此文件夹中包含了几个文件和一个以工程名命名的子文件夹,这个子文件夹中又包含了若干个文件和一个res文件夹,创建工程时的 ...

  2. [简单到爆]eclipse-jee-neon的下载和安装

    Eclipse的下载安装: 访问https://www.eclipse.org/downloads/eclipse-packages/ 选择Eclipse IDE for Java EE Develo ...

  3. centos7操作防火墙

    1.firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status f ...

  4. Linux性能优化从入门到实战：11 内存篇：内存泄漏的发现与定位

      用户空间内存包括多个不同的内存段,比如只读段.数据段.堆.栈以及文件映射段等.但会发生内存泄漏的内存段,只有堆和文件映射段中的共享内存.   内存泄漏的危害非常大,这些忘记释放的内存,不仅应用程序 ...

  5. 网络拓扑_VLAN与Trunk配置

    实验目的: 1.实现VLAN10的两台主机互通; VLAN20的两台主机互通; 2.VLAN10与VLAN20主机不能互通. 拓扑图: 步骤: 1.依图配置PC1,PC2,PC3,PC4的IP,掩码, ...

  6. Debug to add expression

    Debug expression

  7. 【LeetCode】前缀树 trie（共14题）

    [208]Implement Trie (Prefix Tree) (2018年11月27日) 实现基本的 trie 树,包括 insert, search, startWith 操作等 api. 题 ...

  8. sed \s

    export m1=`free|cut -d ":" -f2|sed -e "s/^\s\s*//g"|head -2|tail -1|cut -d ' ' - ...

  9. js格式化数字或者小数，加入千分符（此次为”，“）

    function npChangeNum(num) { var tag = (num || 0).toString().split("."); tag[0] = tag[0].re ...

  10. django之数据模型类的字段分析

    一:表一的字段分析 class Sheep_Area(models.Model):# models.AutoField()自增列,要显示自定义的自增列,必须定义primary=True# area_i ...