<!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. springboot情操陶冶-web配置(八)

    本文关注应用的安全方面,涉及校验以及授权方面,以springboot自带的security板块作为讲解的内容 实例 建议用户可直接路由至博主的先前博客spring security整合cas方案.本文 ...

  2. Spring基础系列-容器启动流程(1)

    原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9870339.html 概述 ​ 我说的容器启动流程涉及两种情况,SSM开发模式和Spri ...

  3. 记录：C++类内存分布(虚继承与虚函数)

    工具:VS2013 先说一下VS环境下查看类内存分布的方法: 先选择左侧的C/C++->命令行,然后在其他选项这里写上/d1 reportAllClassLayout,它可以看到所有相关类的内存 ...

  4. 利用SQL活动和监视器找出耗时与占用CPU较高的不良SQL语句

    SQL活动和监视器是SQL Server自带的一个功能,在不断的升级优化中功能也越来越强大. 运行方式:服务器-->右键-->活动和监视器 可以看到很多数据库重要的运行状态. 1.等待任务 ...

  5. checkbox在vue中的用法小结

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

  6. Vue.js如何在一个页面调用另一个同级页面的方法

    使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: 需要在展示页里调用顶部导航栏页里的方法,两者之间没有引用关 ...

  7. 命令行以及Python交互模式下python程序的编写

    一.命令行模式 在Windows开始菜单选择“命令提示符”,就进入到命令行模式,它的提示符类似C:\>: 二.Python交互模式 在命令行模式下敲命令python,就看到类似如下的一堆文本输出 ...

  8. 让自定义view宽高成比例显示

    有时候我们自定义一个View,比如ImageView,我们需要让它宽高按照一定的比例显示,例如在ImageView在GridView中显示,GridView设置了3列,由于ImageVIew的宽度会根 ...

  9. C# 发送电子邮件源码片段

    下面代码内容是关于C# 发送电子邮件片段的代码,应该对各位有所用途. using System;using System.Web;using System.Web.Mail;public class ...

  10. Android 性能优化：使用 Lint 优化代码、去除多余资源

    前言 在保证代码没有功能问题,完成业务开发之余,有追求的程序员还要追求代码的规范.可维护性. 今天,以“成为优秀的程序员”为目标的拭心将和大家一起精益求精,学习使用 Lint 优化我们的代码. 什么是 ...