Javascript实现打开或退出浏览器全屏
废话不多说，直接上代码：
<!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实现打开或退出浏览器全屏的更多相关文章
- [JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...
- JavaScript：让浏览器全屏显示
并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
- js 实现各浏览器全屏
现代浏览器包括ie11,可以直接用h5的全屏api实现 低版本的IE需要通过ActiveX插件实现: 代码实现 <!DOCTYPE html> <html> <head& ...
- Egret--设置全屏，控制浏览器全屏
1, 手机浏览器打开的项目的时候,浏览器的虚拟按键/标题栏, 使得即便设置全屏也没有变成全屏(好像JS 中有方法向浏览器请求全屏) 2, 加载资源, 关闭后卸载, 再次进入游戏依然很快.不过登陆游戏的 ...
- jsp实现浏览器全屏
在web系统中实现按钮控制浏览器全屏. <!DOCTYPE html> <%@ page contentType="text/html;charset=UTF-8" ...
- 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- 兼容IE浏览器的js浏览器全屏代码
众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...
- 浏览器全屏之requestFullScreen全屏与F11全屏
一.简介 浏览器全屏有两种方式,一种是HTML5新增的requestFullscree全屏,另一种是摁F11实现的全屏,本文将详解两种全屏的特点以及实现代码. 二.requestFullscreen全 ...
- html5 js实现浏览器全屏
全屏 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullsc ...
随机推荐
- multiple-value uuid.NewV4() in single-value context
[root@t ~]# go get github.com/aliyun/aliyun-sts-go-sdk/sts# github.com/aliyun/aliyun-sts-go-sdk/sts/ ...
- CNN延拓至 复数域
- file标签样式修改
1. 这是默认的file样式,无法修改,在网页中用它感觉非常不合群,大部分修改的办法就是把它隐藏,绝对定位一个文本框和一个按钮 这是修改后的样式,之后修改样式就是分别修改文本框和按钮样式了,就非常简单 ...
- JavaScript 如何创建search字段
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- API的理解和使用——单线程架构
核心知识点: 1.单线程机制:所有命令放在一个队列中 2.为什么Redis单线程这么快?内存中执行.非IO阻塞.避免线程切换和竞态产生的消耗. 3.单线程的问题?一个命令不能执行太长时间,不然会阻塞其 ...
- [2018-08-25]模板引擎Razor Engine 用法示例
好久没写博客了,回宁波后最近几个月一直忙些线下的事情. 敲代码方面脱产有阵子了,生疏了,回头一看,这行业果然更新飞快. 最近线下的事情基本忙完,准备开始干回老本行,最重要的一件事就是升级abplus库 ...
- 你不得不知的几款常用的在线API管理工具
在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...
- drawable animation基础
动画配置<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android: ...
- BZOJ 2819 Nim 树链剖分+树状数组
这题真没什么意思. 不过就是将普通的求Min,Max,求和等东西换成Xor,偏偏Xor还有很多性质. 算是刷道水题吧. #include<iostream> #include<cst ...
- react-native修改android包名
安卓已包名作为应用的唯一id,相对iOS来说改起来就不是那么方便,但为了能正式发布自己的应用,还是得改过来. 假设包名为com.exease.etd.objective,以下地方需要修改. 首先是两个 ...