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 ...
随机推荐
- mysql ACID与四种隔离级别归纳总结
关于数据库的ACID特性已经有很多的介绍,这里再重新归纳总结一下: A(atomicity)原子性: 即事务要么全部做完,要么全部不做,不会出现只做一部分的情形,如A给B转帐,不会出现A的钱少了, ...
- Z律师：创业项目如何玩转股权众筹？
原文地址:http://mt.sohu.com/20150619/n415345889.shtml 大家好,这是Z律师创业学院第一期的结业课了,正式集中的课程,就到今天为止,未来有机会,还是会不定期安 ...
- git push报错：error: RPC failed; result=22, HTTP code = 413
新项目推送到服务器时报错: error: RPC failed; result=22, HTTP code = 413| 7.66 MiB/s fatal: The remote end hun ...
- JVM调优总结（一）：基本概念
一.数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型. 基本类型的变量保存原始值,即:他代表的值就是数值本身: 而引用类型的变量保存引用值.“引用值”代表了某个对象的引用,而不是对 ...
- HashTable和HashMap的区别详解
一.HashMap简介 HashMap是基于哈希表实现的,每一个元素是一个key-value对,其内部通过单链表解决冲突问题,容量不足(超过了阀值)时,同样会自动增长. HashMap是非线程安全的, ...
- 添加相应型号和头文件到Keil中
- orcale的over的使用
--------------------------- 建表 --------------------------- create table test_user( id VARCHAR2(12), ...
- JQuery之拖拽插件
一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...
- KindEditor使用初步
KindEditor是一套开源的HTML可视化编辑器,非常适合在CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使用,目前在国内已经成为最受欢迎的编辑器之一.目前最新版本为4.1.9,详见h ...
- Tomcat server.xml 配置虚拟目录
对于Tomcat,打开..\Tomcat 6.0\conf\server.xml文件,找到下面的一行代码(Host)然后在这一行之间下面添加配置代码:<Context path="&q ...