<!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. Django学习之三：django-admin 和 项目manage.py程序

    目录 Django django-admin 和 项目manage.py程序 它俩是什么? 命令程序用法 常用命令 Django django-admin 和 项目manage.py程序 它俩是什么? ...

  2. vue安装element-ui和px2rem的细节

    1.按需引入element-ui vue脚手架搭建完成之后,可以到element-ui官网进行npm 安装: npm i element-ui -S 如果是完整引入可以按照官网一步一步做即可完成:这里 ...

  3. js中的new()到底做了些什么？？

    要创建 Person 的新实例,必须使用 new 操作符.以这种方式调用构造函数实际上会经历以下 4个步骤:(1) 创建一个新对象:(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新 ...

  4. HTML和CSS前端教程03-CSS文本样式

    目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本样式 3.1. 字体属性 3.1. 文本样式 1.CSS颜色-建议就用十六进制 p{ color: #ff ...

  5. Dynamics Customer Engagement V9版本配置面向Internet的部署时候下一步按钮不可点击的解决办法

    微软动态CRM专家罗勇 ,回复299或者20190120可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . Dynamics 3 ...

  6. 【Dojo 1.x】笔记5 使用本地引用

    习惯用CDN引用的同学肯定会知道还有一种叫本地引用,这篇笔记测试本地引用. Dojo SDK下载地址:点我 下载中间的Release Package即可,如果希望下载完整包(Full Source), ...

  7. Odoo POS会员积分当钱用如何设置？

    问题提问 设定积分规则1元积1分.而后每1积分可以当1分钱用,POS中能处理吗? 解决方案 1) 设定服务类型产品“积分”,其单价为0.01,收入科目为“销售费用” 2) 设定积分计划:积分规则是,订 ...

  8. pip 使用豆瓣源

    pip 使用豆瓣源 由于pip 默认使用Python的官方源pypi.python.org/pypi,导致我们经常使用pip装包时速度过慢或者无法安装(请求超时)等问题, 所以国内用户建议使用pip ...

  9. Hadoop Yarn框架详细解析

    在说Hadoop Yarn之前,我们先来看看Yarn是怎样出现的.在古老的Hadoop1.0中,MapReduce的JobTracker负责了太多的工作,包括资源调度,管理众多的TaskTracker ...

  10. mssql sqlserver 指定特定值排在表前面

    转自:http://www.maomao365.com/?p=7141 摘要: 下文讲述sql脚本编写中,将 特定值排在最前面的方法分享, 实验环境:sqlserver 2008 R2 例:将数据表中 ...