<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>页面全屏/退出全屏</title>

 </head>

 <body>

     <a class="screen-full" id="full" href="javascript:;">全屏</a>

 </body>

 </html>

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

 <script>

 $('#full').click(function() {

     var ele = document.documentElement;

     var SCREEN_FULL_TEXT = "全屏";

     var SCREEN_REST_TEXT = "退出全屏";

     var SCREEN_FULL = 'screen-full';

     var SCREEN_REST = 'screen-restore';

     var iconElem = $(this);

     if (iconElem.hasClass(SCREEN_FULL)) {

         var reqFullScreen = ele.requestFullScreen || ele.webkitRequestFullScreen || ele.mozRequestFullScreen || ele.msRequestFullscreen;

         if (typeof reqFullScreen !== 'undefined' && reqFullScreen) {

             reqFullScreen.call(ele);

         };

         iconElem.addClass(SCREEN_REST).removeClass(SCREEN_FULL);

         iconElem.text(SCREEN_REST_TEXT);

     } else {

         if (document.exitFullscreen) {

             document.exitFullscreen();

         } else if (document.mozCancelFullScreen) {

             document.mozCancelFullScreen();

         } else if (document.webkitCancelFullScreen) {

             document.webkitCancelFullScreen();

         } else if (document.msExitFullscreen) {

             document.msExitFullscreen();

         }

         iconElem.addClass(SCREEN_FULL).removeClass(SCREEN_REST);

         iconElem.text(SCREEN_FULL_TEXT);

     }

 });

 </script>

HTML页面全屏/退出全屏的更多相关文章

  1. putty字体大小颜色、全屏/退出全屏快捷键 保存session设置[转]

    字体大小设置 Window->Appearance->Font settings->Change按钮设置(我的设置为16)字体为(Consolas) 字体颜色设置 Window-&g ...

  2. Putty全屏/退出全屏快捷键

  3. Chrome退出全屏问题

    最近做了一个号称很炫的B/S展示软件,展示所用浏览器为Google Chrome. 要求展示时全屏,但是页面要有退出全屏按钮(液晶屏没有键盘). 搜索实现方式几乎前篇一律,即两个JS函数一个实现全屏一 ...

  4. ng2 中的全屏与退出全屏

    1.进入全屏 launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } el ...

  5. JS实现元素的全屏、退出全屏功能

     在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas.所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen.exitFullScr ...

  6. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  7. iOS 多个播放器同时播放，双击全屏，单击退出全屏

    前言:公司需求如下:点击一个按钮播放一个视频,最多同时播放4个:双击某视频让其全屏,单击再恢复原来的样子.IOS的播放器有两种,MPMoviePlayerController,AVAudioPlaye ...

  8. js 实现操作浏览器或者元素的全屏与退出全屏功能

    <!DOCTYPE html> <html lang="en" id="div1"> <head> <meta cha ...

  9. js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...

随机推荐

  1. [三]JavaIO之IO体系类整体设计思路 流的概念以及四大基础分类

    从本文开始,将正式进入JavaIO的简介 在继续javaIO系列的文章之前 可以过去看一下 本人博客上的设计模式中的 适配器模式和装饰器模式 这会对接下来的阅读大有帮助   本文是从逻辑上介绍整个的J ...

  2. 一个emoji引发的一条血案：mysql存储emoji表情字符时报错解决

    以下是我插入一条带表情的数据到mysql后出现错误 2019-03-04 14:24:40,462 ERROR 2807 [-/139.199.27.244/-/2ms POST /api/activ ...

  3. C# 1-2+3-4+5...+m的几种方法

    class Program { //第一种(1-2)+(3-4)+(5-6)...+m public static void Test(int m) { ; == ) { z = -(m / ); } ...

  4. 【Config】类库读取自己的配置文件，配置文件的扩展

    我们在项目中一般都是使用统一的项目文件配置,所有的配置和自定义的字段都写在一个web.config或者App.config文件中.一般平时我们也没有发现问题,确实这么写没有问题,但是就是如果写的多了就 ...

  5. 轻松搞定RocketMQ入门

    RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点: 能够保证严格的消息顺序 提供丰富的消息拉取模式 高效的订阅者水平扩展能力 实时的消息订阅机制 亿级消息堆积能力 RocketMQ网络 ...

  6. SQL中# 与$ 的区别

    区别: (1)#将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是id,则解析成的sql为order by "id&quo ...

  7. Java设计模式——适配器模式（Adapter）

    目的:把源类型适配为目标类型,以适应客户端(Client)的需求:此处我们把目标接口的调用方视为客户端 使用场景:需要对类型进行由源类型到目标类型转换的场景中 前置条件:已有客户端 //Client ...

  8. C# 使用NPOI出现超过最大字体数和单元格格式变成一样的解决

    在使用NPOI写入Excel文件的时候出现“它已经超出最多允许的字体数”,查询资料发现是字体创建太多的原因,需要将常用字体创建好,传入CellStyle中.参考(http://www.cnblogs. ...

  9. Dynamics AX 2012 R2 电子邮件广播错误 0x80040213

    Dynamics AX 2012 R2 电子邮件广播错误 0x80040213 今天Reinhard在新环境做邮件广播测试时,发现无法发送邮件,并报以下错误: 类"CDO.Message&q ...

  10. Java 图片爬虫，java打包jar文件

    目录 1. Java 图片爬虫,制作 .jar 文件 spider.java 制作 jar 文件 添加执行权限 1. Java 图片爬虫,制作 .jar 文件 spider.java spider.j ...