javascript全屏操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background: green;
}
</style>
</head>
<body>
<button id="btn">button</button>
<p id="">这是一个段落</p>
<script type="text/javascript">
var btn = document.querySelector('#btn');
btn.addEventListener('click', function(e) {
if (document.body.RequestFullscreen) {
document.body.RequestFullscreen();
} else if (document.body.webkitRequestFullscreen) {
document.body.webkitRequestFullscreen();
} else {
console.log('不支持')
}
// e.preventDefault()
})
</script>
</body>
</html>
点击按钮将会全屏，esc退出全屏
javascript全屏操作的更多相关文章
- JavaScript全屏显示
JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...
- HTML5全屏操作API
一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...
- HTML5--浏览器全屏操作、退出全屏、是否全屏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript 全屏展示
浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API , 一个小demo验证一下! <!DOCTYPE html> <html l ...
- Fullscreen API：全屏操作
function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } ...
- dos初始操作和全屏方法
1.初始操作 mount d d:\ ;选择挂载的硬盘 d:\ cd Dos cd MASM ;到达debug/edit/link/masm.exe文件的位置 ;然后可以进行debug/edit xx ...
- HTML5实现网页的全屏切换
使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作,封装成进入全屏和退出全屏的函数如下: //进入全屏 function enterFullScreen() { v ...
- HTML5 全屏特性
全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API和事件支持. API ...
- How to Use HTML5 FUll Screen API（如何使用HTML5全屏接口） 【精】
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Fu ...
随机推荐
- PCL点云配准（2）
(1)正态分布变换进行配准(normal Distributions Transform) 介绍关于如何使用正态分布算法来确定两个大型点云之间的刚体变换,正态分布变换算法是一个配准算法,它应用于三维点 ...
- maven-parent的pom.xml配置
//-------------------------------------------system-parent------------------------------------------ ...
- 8大排序算法总结 JS 实现
//bubble sort ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 fun ...
- android手机如何获取手机号
两个方案:1 通过android.permission.READ_PHONE_STATE读取 2 通过短信过滤,读取手机号. 按照第1个方案,AndroidManifest.xml需要添加 < ...
- mvn archetype:generate 创建Maven项目
mvn archetype:generate 创建Maven项目 mvn compile 编译源代码 mvn deploy 发布项目 mvn test-compile 编译测试源代码 mvn test ...
- CI框架 -- 核心文件 之 Hooks.php
钩子 - 扩展框架核心 CodeIgniter 的钩子特性提供了一种方法来修改框架的内部运作流程,而无需修改 核心文件.CodeIgniter 的运行遵循着一个特定的流程,你可以参考这个页面的 应用程 ...
- Java内存、CPU占用率过高
windows下揪出java程序占用cpu很高的线程 并找到问题代码 死循环线程代码 linux下查找java进程占用CPU过高原因 Java 占用CPU使用率很高的分析 记一次线上Java程序导致服 ...
- Unity3d 动态加载材质方法
Texture img = (Texture)Resources.Load("LedPicture"); GameObject.Find("Led").rend ...
- CentOS7 防火墙配置（关闭）
CentOS7 的防火墙配置跟曾经版本号有非常大差别,经过大量尝试,最终找到解决这个问题的关键 CentOS7这个版本号的防火墙默认使用的是firewall.与之前的版本号使用iptables不一样. ...
- [AngularJS]ng-repeat指令要点
ng-repeat指令要点 1,基本格式,这里不作过多说明,需要的话查看文档 <div ng-repeat="item in someCollection [| someFilter: ...