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 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
react 创建单例组件的方法
Apr 26 Javascript
redux.js详解及基本使用
May 24 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
js实现弹窗猜数字游戏
Nov 26 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
如何给phpadmin一个保护
2006/10/09 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
写自荐信三大法宝
2014/01/24 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
文言文辞职信
2015/02/28 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
2016大学军训心得体会
2016/01/11 职场文书