JavaScript控制浏览器全屏显示简单示例


Posted in Javascript onJuly 05, 2018

本文实例讲述了JavaScript控制浏览器全屏显示。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com JS全屏显示</title>
</head>
<body>
<div onclick="launchFullscreen(document.documentElement);">全屏显示</div>
<div onclick="exitFullscreen()(document.documentElement);">退出全屏</div>
  <!--launchFullscreen(document.documentElement);-->
</body>
</html>
<script>
  // 判断各种浏览器,找到正确的方法
  function launchFullscreen(element) {
    if(element.requestFullscreen) {
      element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if(element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if(element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
  // 判断浏览器种类
  function exitFullscreen() {
    if(document.exitFullscreen) {
      document.exitFullscreen();
    } else if(document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
  // 退出全屏模式!
  exitFullscreen();
</script>

使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

JavaScript控制浏览器全屏显示简单示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript import css实例代码
Jul 18 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
轻松搞定js表单验证
Oct 13 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 #jQuery
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 #Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 #Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 #Javascript
微信小程序实现左右联动的实战记录
Jul 05 #Javascript
vue实现自定义多选与单选的答题功能
Jul 05 #Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 #Javascript
You might like
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
浅析php header 跳转
2013/06/17 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
js实现类bootstrap模态框动画
2017/02/07 Javascript
js读取本地文件的实例
2017/12/22 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python求导数的方法
2015/05/09 Python
详解python3中zipfile模块用法
2018/06/18 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
django2笔记之路由path语法的实现
2019/07/17 Python
使用python实现滑动验证码功能
2019/08/05 Python
pymysql的简单封装代码实例
2020/01/08 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
建筑专业自荐信范文
2014/01/05 职场文书
公司新年寄语
2014/04/04 职场文书
小学三年级学生评语
2014/04/22 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS