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软件安装 for Mac

    Office 2019 for Mac 16.31(191110)官方原版安装包&激活 赠送Office 2016 16.16.16(191111) --------- https://www ...

  2. Flutter的Padding、Raw、Column、Expanded组件的基本使用

    Padding组件: Padding组件的基本使用代码: import 'package:flutter/material.dart'; import 'package:flutter_testdem ...

  3. jzy3D从入门到弃坑_3使用jzy3D0.9画2D散点图--多条线条

    jzy3D从入门到弃坑_3 使用jzy3D0.9画2D散点图--多条线条 觉得有用的话,欢迎一起讨论相互学习~Follow Me 主要思路 将多个线条的二维数组读入Scatter对象 存入到同一个画布 ...

  4. python 科学计算基础库安装

    1.numpyNumPy(Numeric Python)是用Python进行科学计算的基本软件包. NumPy是Python编程语言的扩展,增加了对大型多维数组和矩阵的支持,以及一个大型的高级数学函数 ...

  5. siglongjmp和sigsetjmp 用法

    1. 引入原因 由于在信号处理期间自动屏蔽了正在被处理的信号,而使用setjmp/longjmp跳出信号处理程序时又不会自动将 信号屏蔽码修改会原来的屏蔽码,从而引起该信号被永久屏蔽. 可以使用sig ...

  6. Spring Boot启动时出现WARN：No MyBatis mapper was found in

    今天发现spring-boot继承mybatis启动时老是出现WARN: org.mybatis.spring.mapper.ClassPathMapperScanner - No MyBatis m ...

  7. dockerfile使用

    一.构筑镜像命令 docker build -t test/nginx:v1.0 - prese/nginx:v1.0 -f /git/dockerfile . -t:指定存储库:镜像名和标签保存新镜 ...

  8. openstack keystone 总结

    1.OpenStack组件 OpenStack是一个开源的云计算管理平台项目,由几个主要的组件组合起来完成具体工作.OpenStack是一个不断发展的系统,在它的发展历程之中,它的组件个数在增加,服务 ...

  9. 【记录】【springboot】动态定时任务ScheduledFuture，可添加、修改、删除

    这里只演示添加和删除任务的,因为修改就是删除任务再添加而已. 方便演示,任务就是每3秒打印 1.没有任务 后台 2.添加一个任务 3.再添加一个任务 4.删除一个任务 5.再添加一个任务 6.代码 运 ...

  10. [转帖]两大容器管理平台，Kubernetes与OpenShift有什么区别？

    两大容器管理平台,Kubernetes与OpenShift有什么区别? https://www.sohu.com/a/327413642_100159565 原来openshift 就是 k8s的一个 ...