<!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全屏操作的更多相关文章

  1. JavaScript全屏显示

    JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...

  2. HTML5全屏操作API

    一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...

  3. HTML5--浏览器全屏操作、退出全屏、是否全屏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JavaScript 全屏展示

    浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API , 一个小demo验证一下! <!DOCTYPE html> <html l ...

  5. Fullscreen API：全屏操作

    function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } ...

  6. dos初始操作和全屏方法

    1.初始操作 mount d d:\ ;选择挂载的硬盘 d:\ cd Dos cd MASM ;到达debug/edit/link/masm.exe文件的位置 ;然后可以进行debug/edit xx ...

  7. HTML5实现网页的全屏切换

    使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作,封装成进入全屏和退出全屏的函数如下: //进入全屏 function enterFullScreen() { v ...

  8. HTML5 全屏特性

    全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API和事件支持. API ...

  9. How to Use HTML5 FUll Screen API（如何使用HTML5全屏接口） 【精】

    原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Fu ...

随机推荐

  1. node学习笔记4——get数据传递

    nodejs中,关于将接收到的数据处理为json格式用到的是 url 模块. 主要用到是下面3个东东: url.parse   url.pathname url.query 我们看一个简单的例子: 先 ...

  2. Android studio导入framework编译的classes.jar包

    1.在libs文件夹中加入jar包,并将其置顶 注:studio3.1的scope没有Provided选项,都默认选择implementation,studio2.3及以下版本需要将scope设置为P ...

  3. 关于Unity中拖尾渲染器的使用

    拖尾渲染器 是一个组件,能够帮我们绘制出拖尾的效果. 就是跟在运动物体后面的东西,前进的过程中,末尾的不断消失,前面的不断生成,有一个长度.长度是以时间计算的,从末尾到头有多少秒的时间就是拖尾的长度. ...

  4. window.showModalDialog乱码（完美）解决方案

    关于jsp弹出jsp页面传参数中文乱码的问题解决: 弹出方式--window.showModalDialog(requestURL,null,strFeatureInfo); 乱码原因:url传递方式 ...

  5. Java如何比较两个数组是否相等？

    在Java中,如何检查两个数组是否相等? 示例 以下示例显示如何使用数组的equals()方法来检查两个数组是否相等. package com.yiibai; import java.util.*; ...

  6. 分享一个MAC下绕开百度网盘限速下载的方法，三步操作永久生效

    相信大家都比较困惑,百度网盘客户端限速后一般只有几十K的下载速度,Windows有百度网盘破解版,但MAC的破解版似乎不存在,要提速的话,一般的做法是开超级会员(27元/月),身为程序员的我们,是不是 ...

  7. 【转】Spring Boot干货系列：常用属性汇总

    转自Spring Boot干货系列:常用属性汇总 附录A.常用应用程序属性 摘自:http://docs.spring.io/spring-boot/docs/current/reference/ht ...

  8. POI-PPT官方文档

    注意 请注意,XSLF仍然处于早期开发阶段,并且将来会在发行版中发生不兼容的更改. 特征索引 创建新的演示文稿 阅读现有演示文稿 使用预定义的布局创建幻灯片 删除幻灯片 重新订购幻灯片 更改幻灯片大小 ...

  9. C#网络编程之Http请求

    本片篇分享简单介绍C#中的Http请求,前几天帮朋友的项目封装ApiHelper,我粗糙的结果就如下,想想我真的是差的太远了.还有一位架构师也在封装这个Helper , 所以最后的结果当然是使用大牛的 ...

  10. 设置回车的默认按钮detectEnter

    场景: 页面有一个搜索文本框和搜索按钮.正常情况下,当我在搜索文本框输入关键字后按回车键就可以触发搜索按钮进行内容搜索,但由于页面上还有其它按钮,而且默认不是搜索按钮,怎样才能实现回车就触发我们的搜索 ...