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. python2 pickle.dump生成的文件，python3 pickle.load怎么加载

    会报错: UnicodeDecodeError: 'ascii' codec can't decode byte 0xa0 in position 3: ordinal not in range(12 ...

  2. c++ Array运用实例

    myprint.hpp #include <iostream> #include <string> template <typename T> inline voi ...

  3. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器功能简介---视频直播、直播鉴权（如何完美将EasyDSS过渡到新版）

    作为RTMP流媒体服务器,接受RTMP推流.进行实时的直播流分发是EasyDSS流媒体服务自身一大核心功能.写本篇博文的一个目的是向大家介绍EasyDSS新版的直播间.匿名直播.和虚拟直播的功能, 另 ...

  4. 《设计模式》读懂UML类图

    一.类中的主要关系 继承.实现.组合.聚合.依赖.关联 二.UML类图 三.代码实现 public class H2O { } public class O2 { } public interface ...

  5. qt model/view/delegate

    Qt Model/View理解(一)---构造model https://blog.csdn.net/weixin_42303052/article/details/89233887 Qt Model ...

  6. 使用pkg打包node.js项目(egg框架)为可执行包

    问题: 公司有个工具型项目使用node.js 开发,需要部署到客户的服务器中,遇到的问题: 1.客户的服务器没有外网.环境配置,依赖安装等都比较麻烦,只能手工上传,最好能一个文件直接搞定: 2.直接包 ...

  7. odoo self.ensure_one()

    源码: def ensure_one(self): """ Verifies that the current recorset holds a single recor ...

  8. NancyFx And ReactiveX

    http://reactivex.io/ https://github.com/dotnet/reactive http://nancyfx.org/ NancyFX Nancy快速上手 (使用Nan ...

  9. 【剑指offer】1+….+n,不能使用相关关键字

    题目描述 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 分析:可以使用递归! class Soluti ...

  10. 收藏单词TOEFL备份托福英语

    TOEFL托福词汇串讲(文本) alchemy(chem-化学)n. 炼金术 chemistry 化学 alder 赤杨树 联想:older 老人坐在赤杨树下 sloth 树懒 algae n.海藻 ...