<!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. ASP.NET Core教程【二】从保存数据看Razor Page的特有属性与服务端验证

    前文索引:ASP.NET Core教程[一]关于Razor Page的知识 在layout.cshtml文件中,我们可以看到如下代码: <a asp-page="/Index" ...

  2. SpringBoot基础系列-使用日志

    原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9996897.html SpringBoot基础系列-使用日志 概述 SpringBoot ...

  3. MySQL高可用复制管理工具 —— Orchestrator介绍

    背景 在MySQL高可用架构中,目前使用比较多的是Percona的PXC,Galera以及MySQL 5.7之后的MGR等,其他的还有的MHA,今天介绍另一个比较好用的MySQL高可用复制管理工具:O ...

  4. .class文件查看

    十六进制查看(不仅class文件可以看,其他文件格式也可以) hexdump -C XXX.class #注意C是大写(小写c则输出十进制) 反汇编查看 javap -c XXX.class java ...

  5. .NET平台下使用Redis

    using DBI.SaaS.Web.Models.Args; using Rafy; using StackExchange.Redis; using System; using System.Co ...

  6. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  7. JS数组Sort方法的使用

    想用sort方法对数组排下序,代码如下: var nums = "12 645 6 85 81 0 9 365 4 752".split(" ").map(fu ...

  8. Java实践：一个简易的http server和client的java源码学习和总结。

    一.基本思路: 1.服务器端通过socket(), 监听在TCP 8080端口,等待客户端来连接. 2.服务器端解析客户端的HTTP请求中的URI值,把本地的目录下指定文件通过java的读取文件的方式 ...

  9. 如何开启红米手机4X的ROOT超级权限

    红米手机4X通过什么方法拥有了root权限?大家都清楚,Android机器有root权限,如果手机拥有了root相关权限,可以实现更强的功能,举个栗子大家公司的营销部门同事,使用大多数营销软件都需要在 ...

  10. Android的WebView调试工具（无需Fan墙，可同时调试多个设备，永不过期）

    缘起 前端开发离不开Chrome的开发者工具,尤其是调试Android WebView时.然而,如果使用chrome://Inspect的方法,国内的开发者会惊奇地发现“空白啊”!为此,我发布过这个离 ...