html代码

<!-- 全屏按钮 -->

    <img id="alarm-fullscreen-toggler" src="/public/index/images/open.png" alt="全屏按钮" />

js代码

    // 设置全屏

$('#alarm-fullscreen-toggler').on('click', function (e) {

    var element = document.documentElement;     // 返回 html dom 中的root 节点 <html>

    if(!$('body').hasClass('full-screen')) {

        $('body').addClass('full-screen');

        $('#alarm-fullscreen-toggler').addClass('active');

        // 判断浏览器设备类型

        if(element.requestFullscreen) {

            element.requestFullscreen();

        } else if (element.mozRequestFullScreen){   // 兼容火狐

            element.mozRequestFullScreen();

        } else if(element.webkitRequestFullscreen) {    // 兼容谷歌

            element.webkitRequestFullscreen();

        } else if (element.msRequestFullscreen) {   // 兼容IE

            element.msRequestFullscreen();

        }

        // 切换全屏按钮

        $('#alarm-fullscreen-toggler').attr('src','/public/index/images/close.png');

    } else {            // 退出全屏

        console.log(document);

        $('body').removeClass('full-screen');

        $('#alarm-fullscreen-toggler').removeClass('active');

        //  退出全屏

        if(document.exitFullscreen) {

            document.exitFullscreen();

        } else if (document.mozCancelFullScreen) {

            document.mozCancelFullScreen();

        } else if (document.webkitCancelFullScreen) {

            document.webkitCancelFullScreen();

        } else if (document.msExitFullscreen) {

            document.msExitFullscreen();

        }

        // 切换全屏按钮

        $('#alarm-fullscreen-toggler').attr('src','/public/index/images/open.png');

    }

});

js设置页面全屏的更多相关文章

  1. H5中用js让页面全屏

    概述 意外的发现一个网页有一个按钮能使网页全屏,查了下代码发现是H5的全屏api,于是就查了下资料,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: 利用js如何做到让页面全屏和不全屏功能 ...

  2. 学习笔记： js插件 —— fullPage.js （页面全屏滚动）

    fullPage.js (页面全屏滚动) 必须依赖 jquery-ui.min.js,   233K 14760个星. 以后有时间再看. API挺全 https://github.com/alvaro ...

  3. css设置页面全屏背景

    .background { background: url(xxx.png); background-size: 100% 100%; height: 100%; position: fixed; w ...

  4. HTML页面全屏/退出全屏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Android开发 - 设置DialogFragment全屏显示

    默认的DialogFragment并不是全屏,但有些需求需要我们将对话框设置为全屏(内容全屏),Android并没有提供直接的API,通过其它不同的方法设置全屏在不同的机型上总有一些诡异的问题,经过测 ...

  6. 01、Windows Store APP 设置页面横竖屏的方法

    在 windows phone store app 中,判断和设置页面横竖屏的方法,与 silverlight 中的 Page 类 不同,不能直接通过 Page.Orientation 进行设置.而是 ...

  7. 仿新浪游戏频道js多栏目全屏下拉菜单导航条

    仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...

  8. VM virtualBox设置无缝全屏

    设置之前:

  9. js指定区域全屏

    <html>     <head>         <title>js指定区域全屏</title>         <style>      ...

随机推荐

  1. 安装和使用nltk

    安装 参考:https://www.cnblogs.com/zrmw/p/10869325.html 分词:注意先分句再分词,这些对象均来自nltk.tokenize库 word_tokenize 导 ...

  2. fashion MNIST识别（Tensorflow + Keras + NN）

    Fashion MNIST https://www.kaggle.com/zalando-research/fashionmnist Fashion-MNIST is a dataset of Zal ...

  3. Vue打包发布到Tomcat后，刷新报错404解决方法

    在应用下面加 WEB-INF 建 web.xml 内容如下 <?xml version="1.0" encoding="ISO-8859-1"?> ...

  4. API设计之道

    接口安全要求: 1.防伪装攻击(案例:在公共网络环境中,第三方 有意或恶意 的调用我们的接口) 2.防篡改攻击(案例:在公共网络环境中,请求头/查询字符串/内容 在传输过程被修改) 3.防重放攻击(案 ...

  5. 简单工厂(三)——JDK源码中的简单工厂

    private static Calendar createCalendar(TimeZone zone,Locale aLocale) { CalendarProvider provider = L ...

  6. maven工程仿springboot手写代码区分开发测试生产

    读取代码: package com.jz.compute.mc.v2.config; import java.util.Enumeration; import java.util.ResourceBu ...

  7. 领域模型/DDD领域驱动设计

    http://www.fanyilun.me/2018/04/08/%E8%B0%88%E8%B0%88%E9%A2%86%E5%9F%9F%E5%BB%BA%E6%A8%A1/ http://www ...

  8. UE4 常用数学

    转自:https://dawnarc.com/2016/07/mathlinear-algebra%E5%90%91%E9%87%8F%E7%A7%AF%E5%A4%96%E7%A7%AF%E5%8F ...

  9. Linux内核参数详解

    所谓Linux服务器内核参数优化(适合Apache.Nginx.Squid等多种web应用,特殊的业务有可能需要做略微调整),主要是指在Linux系统中针对业务服务应用而进行的系统内核参数调整,优化并 ...

  10. 1.2.1LVM逻辑卷镜像实现方法

    LVM逻辑卷镜像实现方法 本文演示了在CentOS5系统中实现LVM逻辑卷镜像的方法.LVM的镜像功能,有点儿类似于Raid1,即多块儿磁盘互相同步,确保资料不会丢失. 创建物理卷,卷组的步骤这里就先 ...