<!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集成下，mybatis的mapper代理对象究竟是如何生成的

    前言 开心一刻 中韩两学生辩论. 中:端午节是属于谁的? 韩:韩国人! 中:汉字是谁发明的? 韩:韩国人! 中:中医是属于谁的? 韩:韩国人! 中:那中国人到底发明过什么? 韩:韩国人! 前情回顾 M ...

  2. [HEOI2018] 秘密袭击coat

    Description 给定一棵 \(n\) 个点的树,每个点有点权 \(d_i\) ,请对于树上所有大于等于 \(k\) 个点的联通块,求出联通块中第 \(k\) 大的点权之和.\(n\le 166 ...

  3. c#委托中的同步和异步方法即BeginInvoke和EndInvoke

    学习多线程之前我们先了解一下电脑的一些概念,比如进程,线程,这个参考https://www.cnblogs.com/loverwangshan/p/10409755.html 这篇文章.今天我们接着来 ...

  4. Xamarin 学习笔记 - Page（页面）

    本文翻译自CodeProject文章:https://www.codeproject.com/Articles/1226447/Xamarin-Notes-Xamarin-Forms-Pages 转载 ...

  5. Netty学习笔记(六) 简单的聊天室功能之WebSocket客户端开发实例

    在之前的Netty相关学习笔记中,学习了如何去实现聊天室的服务段,这里我们来实现聊天室的客户端,聊天室的客户端使用的是Html5和WebSocket实现,下面我们继续学习. 创建客户端 接着第五个笔记 ...

  6. Java新知识系列 八

    什么是死锁,死锁的原因和必要条件:       []什么是死锁,死锁的原因和必要条件: 死锁:死锁的原因在于进程在等待其它进程占有的某些资源,而自身的资源又被其它进程等待着,造成了死循环. 出现死锁的 ...

  7. (办公)面试java设计模式

      1.单例模式: 程序开发的时候,有些对象只能有一个.有实例,且只有一个,比如工具类. 修改构造方法为私有的. 饿汉模式: 线程安全 创建一个实例 Private Static 实例; 提供一个静态 ...

  8. 深入理解Mysql索引的底层数据结构 B+ Tree （2）

    sql查询 explain的详细用法 操作时间:寻道时间+旋转时间 引入索引:采用二叉树结构 把第二列做为索引生成二叉树结构,此时查询89 只做了两次io操作 但是mysql 为什么不用二叉树作为底层 ...

  9. EOS开发实战

    EOS开发实战   在上一篇文章<EOS开发入门>中,我们为大家介绍了EOS的节点启动和合约部署和调用等入门知识.本次我们来实现一个复杂的例子,可以为其取一个高大上的名字-悬赏任务管理系统 ...

  10. Cs231n-assignment 1作业笔记

    KNN assignment1 KNN讲解参见: https://blog.csdn.net/u014485485/article/details/79433514?utm_source=blogxg ...