<!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. 关于ftp用户连接时出现500OOPS:can not change directory的解决办法

    今天在使用Filezilla连接Linux的时候不能成功,显示"500 OOPS:cannot change directory:/root" 错误,如何解决呢? 默认下是没有开启 ...

  2. Java JNA （四）—— void**、void*、char**、char*、int*等类型映射关系及简单示例

    ByReference类有很多子类,这些类都非常有用. ByteByReference.DoubleByReference.FloatByReference. IntByReference.LongB ...

  3. django中collectstatic的使用

    前言 我最近在琢磨django框架的使用,在上传个人网站服务器上时,再次遇到了找不到静态文件,css.img等样式全无的问题.于是沉下心来,好好研究了django的静态文件到底应该怎么去部署(depl ...

  4. Oracle package demo 包

    1.package 程序包说明(由函数.过程.变量.常量.游标和异常组成) create or replace package pk_test is -- Author : CHEN -- Creat ...

  5. shell脚本--expect自动应答

    expect自动应答  TCL语言 需求1:远程登录到A主机,什么事情也不做 #! /usr/bin/env expect # 开启一个程序 spawn ssh root@192.144.213.11 ...

  6. 带你一文搞定 IO 流相关核心问题

    问:简单谈谈 Java IO 流各实现类的特性? 答:java.io 包下面的流基本都是装饰器模式的实现,提供了各种类型流操作的便携性,常见的流分类如下. 以二进制字节方式读写的流: InputStr ...

  7. tar解压命令

    解压 tar –xvf file.tar //解压 tar包 tar -xzvf file.tar.gz //解压tar.gz tar -xjvf file.tar.bz2 //解压 tar.bz2 ...

  8. 【leetcode】861. Score After Flipping Matrix

    题目如下: 解题思路:本题需要知道一个数字规律,即pow(2,n) > sum(pow(2,0)+pow(2,1)+...+pow(2,n-1)).所以,为了获得最大值,要保证所有行的最高位是1 ...

  9. vue项目中数学公式的展示

    在这里有个mathjax的插件,可以将dom中的数学公式展示. 第一步安装mathjax npm install mathjax 安装完之后,你会在index.html中发现,已经引用了js文件,并且 ...

  10. 为什么选择Linux

    从最近的统计数据可以看到,全球大量数据中心的服务器已经开始向基于 Linux Server 平台转移.相较 Windows Server 而言,Linux Server 提供了更多优势.包括 Goog ...