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

核心代码:

//控制全屏
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. Windows下载安装RabbitMQ教程

    原文链接:http://www.studyshare.cn/software/details/1171/0一.下载 1.下载Erlang 官网下载:去下载 百度网盘下载:去下载  提取码:m1q0 2 ...

  2. Java之路---Day12(多态)

    2019-10-26-22:40:09 目录: 1.多态的概念 2.多态的分类 3.实现多态的三个必要条件 4.多态的格式 5.多态成员变量的使用特点 6.多态成员方法的使用特点 7.多态的好处 8. ...

  3. js中 !==和 !=的区别是什么

    1.比较结果上的区别 !=返回同类型值比较结果. !== 不同类型不比较,且无结果,同类型才比较. 2.比较过程上的区别 != 比较时,若类型不同,会偿试转换类型. !== 只有相同类型才会比较. 3 ...

  4. 数据库-如何创建SQL Server身份验证用户

    1.简介 默认安装SQL Server数据库后,SQL Server通过工具SQL Server Management Studio(SSMS)采用“Windows身份验证”方式登录,需要设置相应用户 ...

  5. 英语chalchite蓝绿松石chalchite单词

    蓝绿松石是铜和铝的磷酸盐矿物集合体,以不透明的蔚蓝色最具特色.也有淡蓝.蓝绿.绿.浅绿.黄绿.灰绿.苍白色等色.一般硬度5~6,密度2.6~2.9,折射率约1.62.长波紫外光下,可发淡绿到蓝色的荧光 ...

  6. sklearn中的KMeans算法

    1.聚类算法又叫做“无监督分类”,其目的是将数据划分成有意义或有用的组(或簇).这种划分可以基于我们的业务需求或建模需求来完成,也可以单纯地帮助我们探索数据的自然结构和分布. 2.KMeans算法将一 ...

  7. 史上最全的整合第三方登录的工具JustAuth

    JustAuth,如你所见,它仅仅是一个第三方授权登录的工具类库,它可以让我们脱离繁琐的第三方登录SDK,让登录变得So easy! 参考图例 授权gitee 授权github 授权weibo 授权钉 ...

  8. 搭建idea出现无法自动映射Mapper问题

    org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 如出这种问题,导致的原因是mapp.xm ...

  9. 【转】如何把变量或者数组定义到SDRAM及任意位置

    我们开发软件的时候,经常会遇到到一个问题,就是内存不够,这个时候就纠结了,怎么办,有两种方法,第一种是扩展内存,外加SRAM或者SDRAM:第二种应该就是优化代码,也就是通常所说的把数组大小减一减,代 ...

  10. Socket网络编程-TCP编程

    Socket网络编程-TCP编程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.socket介绍 1>.TCP/IP协议 2>.跨网络的主机间通讯 在建立通信连接的 ...