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 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
js中的闭包学习心得
Feb 06 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 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不使用插件导出excel的简单方法
2014/03/04 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
Javascript常考语句107条收集
2010/03/09 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
Python中字典和JSON互转操作实例
2015/01/19 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python最长回文串算法
2018/06/04 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
在python中修改.properties文件的操作
2020/04/08 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
爱国主义教育活动总结
2014/05/07 职场文书
关于安全的标语
2014/06/10 职场文书
个人贷款收入证明
2014/10/26 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书