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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
使用eAccelerator加密PHP程序
2008/10/03 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
JScript的条件编译
2007/05/29 Javascript
js word表格动态添加代码
2010/06/07 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
python转换摩斯密码示例
2014/02/16 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python实现的质因式分解算法示例
2018/05/03 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
员工培训心得体会
2013/12/30 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书