js全屏事件fullscreenchange 实现全屏、退出全屏操作


Posted in Javascript onSeptember 17, 2019

本文实例为大家分享了js全屏事件fullscreenchange,实现全屏、退出全屏操作,供大家参考,具体内容如下

1.进入全屏

function launchFullscreen(element) {
 if (element.requestFullscreen) {
  element.requestFullscreen()
 } else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen()
 } else if (element.msRequestFullscreen) {
  element.msRequestFullscreen()
 } else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullScreen()
 }
}

launchFullscreen(document.documentElement) // 整个页面进入全屏
launchFullscreen(document.getElementById("id")) //某个元素进入全屏

2.退出全屏

function exitFullscreen() {
 if (document.exitFullscreen) {
  document.exitFullscreen()
 } else if (document.msExitFullscreen) {
  document.msExitFullscreen()
 } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen()
 } else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen()
 }
}
exitFullscreen()

3.全屏事件

document.addEventListener("fullscreenchange", function (e) {
 if (document.fullscreenElement) {
  console.log('进入全屏')
 } else {
  console.log('退出全屏')
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Grid得到选择行数据的方法总结
Jan 17 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
JS实现扫雷项目总结
May 19 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 #Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 #Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 #Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 #Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 #Javascript
小程序的上传文件接口的注意要点解析
Sep 17 #Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 #Javascript
You might like
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
Python获取当前时间的方法
2014/01/14 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
详解python Todo清单实战
2018/11/01 Python
python中PyQuery库用法分享
2021/01/15 Python
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
护士实习生自我鉴定范文
2013/12/10 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
大雁塔导游词
2015/02/04 职场文书
孝女彩金观后感
2015/06/10 职场文书
金榜题名主持词
2015/07/02 职场文书
员工聘用合同范本
2015/09/21 职场文书
深入理解go slice结构
2021/09/15 Golang
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL