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

核心代码:

//控制全屏
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. pyspider最佳实践

    pyspider是好东西,非常稳定,很久很久以前架了一个,心冷了一段时间,但人家尽忠职守地持续运行,一直在抓取东西. 结合chrome,抓取代码简直不要太好写,没想到,最头大的,还是它的调度.明明感觉 ...

  2. Django 中使用 MarkDown 插件

    目录 Django 使用 markdown 插件 1 将 markdown 转化为 html 2 使用 markdown 编辑框 Django 使用 markdown 插件 Python-Markdo ...

  3. Java中遇到Case cannot be resolved to a variable问题

    Java中遇到Case cannot be resolved to a variable问题 记录一下这两天项目中遇到的一个小问题. 在项目中遇到一个问题,一直显示   Case cannot be ...

  4. TP5日志打印方法封装

    需求:在开发及测试过程中需要打印日志,并且可以将日志内容打印到指定文件,这样方便查看. 过程: 1. 打开think\Log文件,在该文件中添加一个静态方法,代码如下: /** * @param $m ...

  5. JVM 运行时数据区:程序计数器、Java 虚拟机栈和本地方法栈,方法区、堆以及直接内存

    Java 虚拟机可以看作一台抽象的计算机,如同真实的计算机,它也有自己的指令集和运行时内存区域. Java 虚拟机在执行 Java 程序的过程中会把它所管理的内存(运行时内存区域)划分为若干个不同的数 ...

  6. c# 调用 C++ dll 传入传出类型对应说明(转)

    由于经常使用C#调用 非托管C++ dll 操作一下硬件,出现传入传出类型的问题,现整理了C++ dll 类型与 C#类型对应关系: //C++中的DLL函数原型为        //extern & ...

  7. canvas详解---绘制弧线

    Draw an arc context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false); 参数一是圆 ...

  8. 不能走路(walk)

    [题目背景] 小G 同学总是在树上走路.小S 看不下去了,决定阻止小G 同学. [题目描述] 有一棵 n 个点的树,树上有 m 条路径,每条路径为 x[i]到y[i] 的树上最短路径(不经过相同的边) ...

  9. scanner=new Scanner(System.in); int i=scanner.nextInt();

    import java.util.Scanner; public class TryScanner { /** * @param args */ public static void main(Str ...

  10. JSP学习之路

    1.JSP默认Encoding编码格式设置:UTF-8