废话不多说,直接上代码:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<button id="open">全屏展示</button>
<button id="close">退出全屏</button>
<script type="text/javascript">
var open = document.getElementById('open');
var exit = document.getElementById('close'); function openFullScreen() {
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() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
open.addEventListener('click', openFullScreen, false);
exit.addEventListener('click', exitFullScreen, false);
</script>
</body>
</html>

Javascript实现打开或退出浏览器全屏的更多相关文章

  1. [JavaScript] 用html5 js实现浏览器全屏

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...

  2. JavaScript:让浏览器全屏显示

    并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

  3. js 实现各浏览器全屏

    现代浏览器包括ie11,可以直接用h5的全屏api实现 低版本的IE需要通过ActiveX插件实现: 代码实现 <!DOCTYPE html> <html> <head& ...

  4. Egret--设置全屏,控制浏览器全屏

    1, 手机浏览器打开的项目的时候,浏览器的虚拟按键/标题栏, 使得即便设置全屏也没有变成全屏(好像JS 中有方法向浏览器请求全屏) 2, 加载资源, 关闭后卸载, 再次进入游戏依然很快.不过登陆游戏的 ...

  5. jsp实现浏览器全屏

    在web系统中实现按钮控制浏览器全屏. <!DOCTYPE html> <%@ page contentType="text/html;charset=UTF-8" ...

  6. 用html5 js实现浏览器全屏

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  7. 兼容IE浏览器的js浏览器全屏代码

    众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...

  8. 浏览器全屏之requestFullScreen全屏与F11全屏

    一.简介 浏览器全屏有两种方式,一种是HTML5新增的requestFullscree全屏,另一种是摁F11实现的全屏,本文将详解两种全屏的特点以及实现代码. 二.requestFullscreen全 ...

  9. html5 js实现浏览器全屏

    全屏 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullsc ...

随机推荐

  1. Tomcat学习笔记【5】--- 项目部署详解

    本文主要讲在Tomcat中部署项目的几种方式:静态部署.动态部署. 一 静态部署 静态部署项目有好几种方式,比较典型的有如下4种: 1.1 方式一:将Web项目放到webApps目录下 直接将web项 ...

  2. client网络优化方法

    减小图片大小(使用WebP格式的图片)  大部分的Facebook应用数据都是图片,因此降低图片的大小就能够较少数据的下载量.从而加快下载速度,这一点在高延迟的网络环境下很重要.Facebook返回给 ...

  3. 设计模式 - 单件模式(singleton pattern) 具体解释

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u012515223/article/details/28595349 单件模式(singleton ...

  4. RaspBerry Pi3 ~ 内核编译

    RaspBerryPi3-内核编译 转载注明出处:http://www.cnblogs.com/einstein-2014731/p/5985128.html 在有道云笔记的同步分享:http://n ...

  5. 《C prime plus (第五版)》 ---第12章 存储类.链接和内存管理

    12-1:存储类: 1.作用域: 代码块作用域,函数原型作用域和文件作用域. 2.链接:分为外部链接,内部链接和空链接.代码块作用域和函数原型作用域都是空连接,意味着是私有的.而文件作用域的变量可能是 ...

  6. M1卡的工作原理【转】

    本文转载自:https://blog.csdn.net/zmq5411/article/details/52042457 M1卡的工作原理 本篇对M1卡的编程是利用上述第二种方法.M1卡最为重要的优点 ...

  7. Java截取最后一个 _ 后面的所有字符

    String file = http://localhost:8888/upload/20190310/115111_58_592_HDFS读取文件的流程.png //截取文件名 String ori ...

  8. js正则表达式(2)

    找到以某个字符串开头的字符串 var myReg=/^(abc)/gim; 如果不加m,那么只找一行,而加了m可以找到每行中以该字符串开头的匹配文本. 如: abcsfsdfasd7890hklfah ...

  9. 「USACO08DEC」「LuoguP2922」秘密消息Secret Message(AC自动机

    题目描述 Bessie is leading the cows in an attempt to escape! To do this, the cows are sending secret bin ...

  10. 运维程序】简单的命令控制器(支持定时命令执行、重复定时任务命令和进程管理,开发这个小程序主要是为了方便管理服务进程)【个人github项目】

    一.前言: command-controller 一个运维程序,简单的命令控制器(支持定时命令执行和重复定时命令,开发这个程序主要是为了方便管理服务进程) 本来是要用python做的,但是之前做ffm ...