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

核心代码:

//控制全屏
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. Socker编程之UDP

    一:socket简介 1. 不同电脑上的进程之间如何通信 首要解决的问题是如何唯一标识一个进程,否则通信无从谈起! 在1台电脑上可以通过进程号(PID)来唯一标识一个进程,但是在网络中这是行不通的. ...

  2. 一步一步学Spring Boot 2 微服务项目实战 - 黄文毅-2018年8月第一次印刷

    properties 配置文件的优先级高于.yml .在properties文件中配置了server.port=8080 同时在.yml中配置了server.port=8090  Spring Boo ...

  3. 【开发笔记】-MySQL数据库5.7+版本,编码格式设置

    原因 昨天不小心把数据库搞崩了,重装了5.7.27版本得mysql数据库,在安装过程中并没有设置数据库默认编码格式等操作.在把项目启动后,jpa自动创建表结构,会把数据库,表,字段的编码自动设置为IS ...

  4. 【转载】C#的DataTable类Clone及Copy方法的区别

    在C#中的Datatable类中,Clone方法和Copy方法都可以用来复制当前的DataTable对象,但DataTable类中的Clone方法和Copy方法还是有区别的,Clone方法只复制结构信 ...

  5. 小tips:TCP的三次握手、长连接、 短连接、 SPDY 协议

    当网络通信时采用TCP协议时,在真正的读写操作之前,server与client之间必须建立一个连接,当读写操作完成后,双方不再需要这个连接时它们可以释放这个连接,连接的建立是需要三次握手的,而释放则需 ...

  6. 你能想象未来的MES系统是什么样吗?

    “智能制造”热潮席卷神州大地,在工业4.0热潮,以及国家大力推进中国制造2025的背景下,建设智能工厂,推进智能制造已成为制造企业共同的目标.作为承上启下的车间级综合信息系统,MES系统得到了制造企业 ...

  7. Spring中获取外部配置文件中的属性值

    很多时候需要将配置信息从程序中剥离粗来,Spring现在提供的方法是通过@Value注解和<context:placeholder>来获取配置文件中的配置信息.这里给出一个简单的例子. 首 ...

  8. 将浏览器地址栏中的 Request 参数显示成中文

    希望实现:在当 JSP 页面发起请求,或者 Servlet 跳转时,地址栏中的参数可以显示成中文. 在通常情况下,浏览器地址栏中的URL地址为了适配不同的浏览器,会将URL地址信息转码为"I ...

  9. Android 还可以走多久?

    最近,有位知识星球的球友问我这么一个问题: 我做 Android 开发五年多时间了,但是最近总是很焦虑,看着人工智能越来越火,很担心 Android 要不行了,想问下,我现在要转行么?Android ...

  10. table的各种用法

    使用 colgroup 和 col 实现响应式表格(table的各种用法):http://coderlt.coding.me/2017/11/20/table-colgroup/