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

 <!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. 【docker】学习笔记一:制作自己的centos6.9镜像

    前言: 最近开始研究docker,在这里做一个记录. 本来开始想用centos7系列做镜像,毕竟是最新版本的centos,但是centos7有一个严重的bug,就是正常启动的镜像不能使用systemc ...

  2. MySQL——多版本并发控制

    核心心知识点: (1)MVCC的优点和缺点 (2)MVCC的工作机制 之前在提及幻读的时候,提到过InnoDB的多版本并发控制可以解决幻读问题. 大多数MySQL的事务性存储引擎,例如InnoDB.F ...

  3. 微信小程序开发:学习笔记[4]——样式布局

    微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...

  4. JAVA各版本更新特性1-8

    JAVA各版本更新特性1-8 原文地址 Java Versions, Features and History This article gives you a highlight of import ...

  5. png24 png8 jpeg与gif

    png24无损压缩,支持透明,有8位布尔透明通道,支持半透明,生成的图片品质最高,也最大 png8支持透明,有1位布尔透明通道,要么透明.要么半透明,生成的图片很小,只支持256色 jpeg有损压缩, ...

  6. Hive- Hive Web Interface

    当我们安装好hive时候,我们启动hive的UI界面的时候,命令: hive –-service hwi ,报错,没有war包 我们查看hive/conf/hive-default.xml.templ ...

  7. BZOJ 1231 [Usaco2008 Nov]mixup2 混乱的奶牛:状压dp + 滚动数组

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1231 题意: 给你n个数字s[i],问你有多少个排列,使得任意相邻两数字之差的绝对值大于m ...

  8. PHP按照比例随机

    有这样的需求,在打开链接的时候,随机(按照项目的某个属性的比例随机)跳转到指定的几个项目的某一个项目页面 比如项目A:80  项目B:20 那么跳转到项目A 的比例为80%,项目B的比例为20% 那么 ...

  9. IDEAL葵花宝典:java代码开发规范插件 p3c

    前言: P3C插件 是阿里巴巴p3c项目组进行研发.这个项目组是阿里巴巴开发爱好者自发组织形成的虚拟项目组,根据<阿里巴巴Java开发规范>转化而成的自动化插件,并且实现了部分自动编程. ...

  10. 机器视觉 Local Binary Pattern (LBP)

    Local binary pattern (LBP),在机器视觉领域,是非常重要的一种特征.LBP可以有效地处理光照变化,在纹理分析,纹理识别方面被广泛应用. LBP 的算法非常简单,简单来说,就是对 ...