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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 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
ThinkPHP登录功能的实现方法
2014/08/20 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
python和shell获取文本内容的方法
2018/06/05 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
信用卡结清证明怎么写
2014/09/13 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
小学生思想品德评语
2014/12/31 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL