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 相关文章推荐
ajax java 实现自动完成功能
Dec 19 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
详解webpack 多入口配置
Jun 16 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
关于Vue中的options选项
Mar 22 Vue.js
详解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
做一个有下拉功能的留言版
2006/10/09 PHP
PHP 5.0 Pear安装方法
2006/12/06 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
WordPress网站性能优化指南
2015/11/18 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
Python截图并保存的具体实例
2021/01/14 Python
ASP.NET Core中的配置详解
2021/02/05 Python
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
留学自荐信
2013/10/10 职场文书
学前教育毕业生自荐信范文
2013/12/24 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
初中学生评语大全
2014/04/24 职场文书
同意迁入证明模板
2014/10/26 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python