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 5.7主从复制从零开始设置及全面详解——实现多线程并行同步，解决主从复制延迟问题！
MySQL 5.7主从复制从零开始设置及全面详解——实现多线程并行同步,解决主从复制延迟问题!2017年06月15日 19:59:44 蓝色-鸢尾 阅读数:2062版权声明:本文为博主原创文章,如需转 ...
- Java初始化顺序（静态变量、静态初始化块、实例变量、实例初始化块、构造方法）
1.执行顺序 1.1.一个类中的初始化顺序 类内容(静态变量.静态初始化块) => 实例内容(变量.初始化块.构造器) 1.2.两个具有继承关系类的初始化顺序 父类的(静态变量.静态初始化块)= ...
- 关于div一侧固定,另一侧自适应
关于div一侧固定,另一侧自适应,从文字看出 一侧固定:说明有固定长度, 一侧自适应:说明是按比例缩放 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- 关于Unity中的道具拾取(专题六)
原理就是把道具做成触发器,触发器就是当我们有碰撞发生的时候,只会检测碰撞,而不会有任何改变物理运动状态的过程. 触发器非常适合道具拾取,因为它不会改变原本运动物体的任何物理属性,但是依然会检测碰撞,响 ...
- SAP 物料移动类型查询表
Goods movement w/o referenceB Goods movement for purchase orderF Goods movement for production order ...
- (笔记)Linux下如何查看高CPU占用率线程
在 Linux 下 top 工具可以显示 cpu 的平均利用率(user,nice,system,idle,iowait,irq,softirq,etc.),可以显示每个 cpu 的利用率.但是无法显 ...
- [转]Android--多线程之Handler
原文:http://www.cnblogs.com/plokmju/p/android_Handler.html 前言 Android的消息传递机制是另外一种形式的“事件处理”,这种机制主要是为了解决 ...
- (转)小议TCP的MSS(最大分段)以及MTU
[前言]漫漫51长假,没有好的去处,只能每日上网消遣,某日逛到NBO灌水,见一帖曰:无法通过2514路由器上MSN(出口为ADSL线路,通过PPPoE)吾心想,ADSL---PPPoE,那肯定就是MT ...
- Winform控件学习笔记【第二天】——常用控件
背景:期末考试刚过就感冒了,嗓子火辣辣的,好难受.但是一想起要学习总结就打起精神来了,Winform控件网上也没有多少使用教程,大部分都是自己在网上零零散散的学的,大部分用的熟了,不总结会很容易忘得. ...
- FunGuild 数据库简介
FUNGulid = Fungi + Functional + Guild , 是一个真菌的功能注释的数据库,目前数据库中涵盖了超过12000个真菌的功能注释信息: 网址如下: http://www. ...