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. Java12新特性 -- 可中断的 G1 Mixed GC

    G1是一个垃圾收集器,设计用于具有大量内存的多处理器机器.由于它提高了性能效率,G1垃圾收集器最终将取代CMS垃圾收集器. 该垃圾收集器设计的主要目标之一是满足用户设置的预期的 JVM 停顿时间. G ...

  2. Jackson的基本用法与拓展

    目录 一.先搞两个测试需要使用的类 二.简单操作:obj与json互转 2.1.对象转json字符串 2.2.json字符串转对象 三.拓展需求 3.1.对象转json时,忽略某个字段 3.2.对象转 ...

  3. jvm 性能调优工具之 jmap 命令详解

    jmap名称:Java Memory Map(内存映射) 官方文档:https://docs.oracle.com/javase/1.5.0/docs/tooldocs/share/jmap.html ...

  4. Vue 组件封装发布到npm 报错 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

    Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 原因是 没有导出 export default { name:& ...

  5. Windows Server 2008 R2 IIS7.5配置FTP图文教程

    本文为大家分享了IIS 配置FTP 网站的具体过程,供大家参考,具体内容如下 说明:服务器环境是Windows Server 2008 R2,IIS7.5. 1. 在 服务器管理器的Web服务器(II ...

  6. k8s-job使用

    一.job特性 运行完成后退出,但是不会被删除,便于用户查看日志信息,了解任务完成的情况 删除job时产生的pod也会被一起删除 job中可以运行多个pod(任务执行多次),且可以并行运行缩短任务完成 ...

  7. qsort与sort

    快排是我们平常敲代码和比赛的时候     经常使用到的方法 qsort是函数库中自带的函数    这是一个标准的快排函数 而sort比qsort更是好用    sort对于不同大小的数组   会使用不 ...

  8. csu 1978: LXX的图论题

    1978: LXX的图论题 Submit Page   Summary   Time Limit: 1 Sec     Memory Limit: 128 Mb     Submitted: 71   ...

  9. [转帖]关于4A（统一安全管理平台）系统的理解

    雪山上的蒲公英 https://www.cnblogs.com/zjfjava/p/10674577.html 关于4A(统一安全管理平台)系统的理解   1. 4A系统的需求分析 近年来企业用户的业 ...

  10. leetcode动态规划笔记一---一维DP

    动态规划 刷题方法 告别动态规划,连刷 40 道题,我总结了这些套路,看不懂你打我 - 知乎 北美算法面试的题目分类,按类型和规律刷题 题目分类 一维dp House Robber : 求最大最小值 ...