HTML JS全屏和退出全屏

  • 全屏方法
  • 退出全屏方法
  • 调用代码
  • 判断全屏
    • 错误的做法
    • 错误分析
    • 正确的做法

全屏方法

function launchIntoFullscreen(element) {if(element.requestFullscreen){element.requestFullscreen();}else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}else if(element.webkitRequestFullscreen) {element.webkitRequestFullscreen();}else if(element.msRequestFullscreen) {element.msRequestFullscreen();}
}

退出全屏方法

function exitFullscreen() {if(document.exitFullscreen) {document.exitFullscreen();} else if(document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if(document.webkitExitFullscreen) {document.webkitExitFullscreen();}
}

调用代码

var divTest = document.getElementById("time");
launchIntoFullscreen(divTest);

判断全屏

错误的做法

function checkFull() {var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;//to fix : false || undefined == undefinedif (isFull === undefined) {isFull = false;}return isFull;}

错误分析

以上代码是错的, 错的, 错的. 不晓得都哪里夏吉尔抄;
两个enabled是表示是否禁用了全屏功能, 不能作为最终的全屏与否的结果, 它只能用来提前预判是否能够使用fullScreen和webkitIsFullScreen进行全屏判断. 网上一大堆,抄来抄去的, 都没证实下的.

正确的做法

function checkFull() {var isFull = false;if (document.fullscreenEnabled || document.msFullscreenEnabled ) {isFull = window.fullScreen || document.webkitIsFullScreen;if (isFull === undefined) {isFull = false;}}return isFull;
}

PS:
经测试,在Chrome的69版本中,*document.fullscreenEnabled*和document.msFullscreenEnabled两个属性属于未定义,下面的正确做法也不适用,而上面的错误做法可行。

修改自: https://www.cnblogs.com/yiven/p/7885528.html

HTML JS全屏和退出全屏相关推荐

  1. JS实现全屏和退出全屏

    JS实现全屏和退出全屏 //全屏 function fullScreen(){var el = document.documentElement;var rfs = el.requestFullScr ...

  2. js实现全屏与退出全屏,解决F11进入全屏后退出全屏API方法失效(chrome)

    js实现全屏与退出全屏,解决F11进入全屏后退出全屏API方法失效(chrome) 解决的问题 谷歌浏览器F11全屏后,在页面中编写的全屏按钮失效 解决方法 //判断是否是全屏状态 var isFul ...

  3. python退出全屏_实现网页全屏和退出全屏JS代码,多浏览器兼容

    js全屏和退出全屏代码|www.125jz.com 全屏显示 退出全屏 function requestFullScreen(element) { // 判断各种浏览器,找到正确的方法 var req ...

  4. js 控制浏览器 实现全屏 和 退出全屏功能

    在工作中我们偶尔遇到不需要浏览器导航栏和标题栏,需要将整个项目全屏展示的情况,虽然有一些快捷键可以实现此效果,但我们更希望项目中有类似的功能,可以让用户任意切换. 1.js 功能处理 //本案例只为演 ...

  5. 退出全屏html,js全屏和退出全屏代码范例

    js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌.火狐.360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏). 这个demo基本是够了,直接复制下面的源码另存为ht ...

  6. linux控制台则怎么退出全屏,JS 全屏和退出全屏详解及实例代码

    JS 全屏和退出全屏 js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌.火狐.360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏). 这个demo基本是够了,直接复 ...

  7. js 实现全屏、退出全屏功能

    js 实现全屏.退出全屏功能 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...

  8. js实现浏览器的全屏和退出全屏

    js实现浏览器的全屏和退出全屏 关于更多日常使用的公共类的操作方法,可以关注下小滑轮网站 /*** 全屏*/let toFullScreen = () => {let el = document ...

  9. js实现全屏和退出全屏功能

    主要是全屏和退出全屏事件,以及相应的操作(采用window.onresize监测) $(function(){//全屏$("#fullScreen").on("click ...

最新文章

  1. python数据框 命名_Python-根据列值将数据框分为多个数据框,并用这些值命名 - python...
  2. 如何快速搭建智能人脸识别系统
  3. 困扰爱因斯坦的「幽灵般的超距作用」,是如何被贝尔定理证明确实存在的?...
  4. int能表示的数据范围(在VS2017下,int和long都是32位)
  5. vscode插件列表及配置信息
  6. Android中对Log日志文件的分析
  7. python 温度 符号_【火马】Python学习小记01
  8. php生成16位不重复随机码,PHP n个不重复的随机数生成代码
  9. layui表单的ajax联动,layui的select联动实现代码
  10. oracle数据库dblink创建语句_3场直播丨达梦DM8数据库安装部署初体验、新基建下的国产数据库应用和发展趋势、Oracle外部表创建与使用...
  11. c++如何实现对硬盘的操作_如何使用Python实现自动化点击鼠标和操作键盘?
  12. 基于JEECG框架,前台VUE,后台java,导入导出
  13. Activity透明主题的一个坑
  14. 计算机启动太慢的原因是,电脑启动慢的原因分析
  15. html显示隐藏表格内外边框
  16. 网页设计期末课程设计大作业 HTML、CSS 海绵宝宝动漫网页作业
  17. android 添加系统日历事件,添加系统日历事件
  18. 值得收藏|关于2022年视频号经营解决方案,都在这里了
  19. 数据库设计中各种键的含义
  20. 如何用3个月零基础入门网络安全?

热门文章

  1. “篆书之美”——2008北京奥运体育图标
  2. css透明度为0.2是什么颜色,CSS3颜色不透明度的设置方法【web前端】
  3. HelloCode:少儿编程可以和其他学科相融合吗
  4. 非全日制研究生含金量低?全面解读来了!
  5. html一级子元素,利用JavaScript怎么获取元素下的第一级子元素
  6. MySQL实战45讲(前5讲)
  7. python shell脚本编程100例_《shell脚本编程100例》[1.05MB]PDF完整版下载-码农之家
  8. 故事中的酒---我依旧在古楼
  9. mtk 电池曲线_MTK Android Driver :Battery电池曲线
  10. copy.deepcopy(train_model)时报错:Only Tensors created explicitly by the user support the deepcopy