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. 工具推荐--Mac下画图软件：Omnigraffle

    场景描述: 日常工作中,开发的小伙伴可能会遇到,需要画流程图,架构图,时序图,UML图,网络拓扑图...等等各种图,有的小伙伴用Visio,ProcessOn,亿图图示......又是一堆软件,先不说 ...

  2. android 8.1 wifi提示"已连接 但无法访问互联网"的解决办法

    主要是GFW的问题 adb shell以下命令解决 settings put settings put settings put settings put global captive_portal_ ...

  3. Ubuntu 16.04 Roboware安装和使用

    博客参考:https://blog.csdn.net/qq_41450811/article/details/80305846 RoboWare Studio是一个ROS集成开发环境.它使 ROS开发 ...

  4. gitlib配置push后自动触发jenkins构建sonar扫描

    jenkins所用到的插件: Gitlab Hook Plugin 配置步骤 1.先进入gitlab的个人设置,生成api token 2.复制生成的访问令牌,打开jenkins的凭据,添加选择类型是 ...

  5. Xcode 创建使用多个 target （1）

    前段时间,浏览了一个项目:手机和平板同时适配的.见识到了多个target 应用的妙处: 一个target 担任 手机开发,一个target 担任 平板开发,设计的很巧妙. 一口吃不成胖子,这篇先写 第 ...

  6. (CSDN迁移)JAVA多线程实现-单线程化线程池newSingleThreadExecutor

    JAVA通过Executors提供了四种线程池,单线程化线程池(newSingleThreadExecutor).可控最大并发数线程池(newFixedThreadPool).可回收缓存线程池(new ...

  7. 配置git diff和git merge使用的第三方工具

    一般在运行git merge branchName后,git 如果提示了merger冲突,然后运行git mergetool.Git提示冲突后,运行git mergetool  --tool-help ...

  8. Python实现树

    树 (tree) 是一种非常高效的非线性存储结构.树,可以很形象的理解,有根,有叶子,对应在数据结构中就是根节点.叶子节点,同一层的叶子叫兄弟节点,邻近不同层的叫父子节点,非常好理解. 注:定义来自百 ...

  9. Go语言【学习】defer和逃逸分析

    defer 什么是defer? defer是Go语言的一中用于注册延迟调用的机制,使得函数活语句可以再当前函数执行完毕后执行 为什么需要defer? Go语言提供的语法糖,减少资源泄漏的发生 如何使用 ...

  10. SSM整合学习 四

    事务管理 一:初步理解 理解事务之前,先讲一个你日常生活中最常干的事:取钱. 比如你去ATM机取1000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉1000元钱:然后ATM出1000元钱.这两个 ...