应用场景:
比如很多网页游戏全屏之类的,或者是网上看小说等。

核心代码:

//控制全屏
function enterfullscreen() { //进入全屏
$("#fullscreen").html("退出全屏");
var docElm = document.documentElement;
//W3C
if(docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if(docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if(docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if(elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} function exitfullscreen() { //退出全屏
$("#fullscreen").html("切换全屏");
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
} var a = ;
$('#fullscreen').on('click', function() {
a++;
a % == ? enterfullscreen() : exitfullscreen();
})

前端代码:

<a type="button" id="fullscreen" class="btn btn-default visible-lg visible-md"><i class="fa fa-refresh" aria-hidden="true"></i> 切换全屏</a>

js之切换全屏和退出全屏实现的更多相关文章

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

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

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

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

  3. div的全屏与退出全屏

    div的全屏与退出全屏 作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...

  4. android开发:全屏和退出全屏

    android开发:全屏和退出全屏 from://http://blog.csdn.net/dyllove98/article/details/8831933 2013-04-21 20:31 413 ...

  5. Cordova 设置全屏及退出全屏切换

    设置全屏在super.init();之前 最后才退出全屏. 以下为具体代码: package com.agile.ittm; import android.os.Bundle; import andr ...

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

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

  7. Android动态的全屏和退出全屏

    转自:http://chroya.iteye.com/blog/974031 让程序全屏的方法,大家都知道,那是静态的,程序运行之初就申明了.但是如果有这样的需求:要在程序运行的过程中,执行了某个操作 ...

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

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

  9. 原生js实现浏览器全屏和退出全屏

    全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.m ...

随机推荐

  1. ASP.NET 后台 COOKIE 的设置

    这几年经常与安全打交道,深知 COOKIE 对一个网站的安全影响有多大,所以在编写相与 cookie 相关代码的时候,都会特别的小心. 最近做一个系统,有几个地方用到 cookie, 然后统一把 co ...

  2. js new Date()不带时分秒时,时间变了 问题解决

    //先把电脑系统时间的 时区 调到别的时间一下如 夏威夷 UTC-10:00//在浏览器的Console里运行如下代码,getMonth是从0开始的,所以要+1 var d=new Date(&quo ...

  3. JavaScript一些对象。

    Function对象: 1.创建方式: function f(a) { alert(a); } var f=function(a){ alert(a); } 2.方法: 3.属性: 1.length: ...

  4. JVM 理论基础目录(待更新,系列完全写完后会统一整理好)

    参考文档: [1] Java 虚拟机规范(Java SE 8版) [2] 深入理解 Java 虚拟机: JVM 高级特性与最佳实践 周志明 本系列的更新快慢全部随意,介意者请海涵. 一 .JVM 入门 ...

  5. 常用内置模块(一)--time、os、sys、random、shutil、pickle、json

    一.time模块 Python中,通常有这几种方式来表示时间: 1.时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.我们运行“type( ...

  6. 项目Beta冲刺(5/7)(追光的人)(2019.5.27)

    所属课程 软件工程1916 作业要求 Beta冲刺博客汇总 团队名称 追光的人 作业目标 描述Beta冲刺每日的scrum和PM报告两部分 队员学号 队员博客 221600219 小墨 https:/ ...

  7. 2.创建NHibernateHelper帮助类,生成sessionFactory

    接上一篇文章 使用FluentNHibemate 操作数据库,添加映射到数据库 http://www.cnblogs.com/fzxiaoyi/p/8443586.html 在Model文件下再创建个 ...

  8. Ofbiz项目学习——阶段性小结——更新数据

    一.根据一个字段进行修改 /** * 根据一个字段进行修改(这个条件字段可以是主键, 也可以不是主键) * @param dctx * @param context * @return */ publ ...

  9. Let Start

      A free timing software with very small memory occupation. This tool is a pure green convenient off ...

  10. Trolley slow