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

 <!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. Redis3.x HA 方案(基于 Sentinel 方式)

    第一部分 Redis-HA 搭建 一.Redis-HA 拓扑 一主两从,主从复制,故障时主从切换 三个Redis节点 + Sentinel 节点 Master          127.0.0.1   ...

  2. 通过JMX获取weblogic的监控指标

    通过JMX获取weblogic的监控数据,包括JDBC,SESSION,SERVERLET,JVM等信息.主要用到weblogic自己的t3协议,所以要用到weblogic的jar包:wlfullcl ...

  3. SSH Tunnel扫盲(ssh port forwarding端口转发)

    SSH的的Port Forward,中文可以称为端口转发,是SSH的一项非常重要的功能.它可以建立一条安全的SSH通道,并把任意的TCP连接放到这条通道中.下面仔细就仔细讨论SSH的这种非常有用的功能 ...

  4. UVA - 10305 【拓扑排序】

    题意 给出一些任务的优先级别 将这些任务进行的时间 进行先后排序 思路 拓扑排序 将所以有先后关系的任务都连一条边 然后每次 输出 度为0 的任务 每次把 以这个任务为弧的边 都取消 相对应任务的度也 ...

  5. 微信公众号验证TOKEN

    服务端验证微信token header('Content-type:text'); define("TOKEN", "weixin"); $signature ...

  6. jzyz集训 0611

    今天jjh和mzx搞的互测题目有必要记录一下. T1:序列上可以放012三种颜色,有m个限制表示[l,r]区间的颜色数目必须是c,求方案数. 显然的DP,但关键是状态怎么设置,连续设置了n个状态都被自 ...

  7. SpringBoot2.0之整合ActiveMQ(点对点模式)

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  8. PYTHON 爬虫笔记十一:Scrapy框架的基本使用

    Scrapy框架详解及其基本使用 scrapy框架原理 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了 ...

  9. Apache CGI 配置

    在/etc/apache2/apache2.conf末尾添加 ServerName lacalhost:80 然后启动CGI模块: sudo a2enmod cgi 3.重启Apache: syste ...

  10. 假日旅游CSS网页模板

    假日旅游CSS3网页模板,蓝色,旅游,假日,公司,设计,主页,HTML,DIV+CSS,模板下载. http://www.huiyi8.com/lvyoumuban/css/