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 打开页面window.location和window.open的区别
Mar 17 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 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
一些关于PHP的知识
2006/11/17 PHP
PHP操作xml代码
2010/06/17 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
jQuery事件详解
2017/02/23 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
python中partial()基础用法说明
2018/12/30 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
python实现简单银行管理系统
2019/10/25 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
ET Mall东森购物网:东森严选
2017/03/06 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
文明村创建实施方案
2014/03/27 职场文书
法学求职信
2014/06/22 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书