JS 全屏和退出全屏详解及实例代码

前端之家收集整理的这篇文章主要介绍了JS 全屏和退出全屏详解及实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

JS 全屏和退出全屏

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

这个demo基本是够了,直接复制下面的源码另存为html文件效果吧。

js全屏和<a href="https://www.jb51.cc/tag/tuichu/" target="_blank" class="keywords">退出</a>全屏<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>

感谢阅读,希望嫩帮助到大家,谢谢大家对本站的支持

以下是其它网友的补充

我们知道,浏览器全屏通常按快捷键F11。JS控制浏览器全屏也不稀奇,它让Web应用看上去更像似原生软件应用效果。比如点餐系统、叫号系统等等。

JS让浏览器全屏及退出全屏的方法网上很多,这不是重点,重点是需注意:浏览器全屏只能通过鼠标手势点击事件去触发。

JS全屏方法

JS退出全屏方法

控制台警告

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

释义:在"Element"上执行"requestFullscreen"方法失败,javascript API仅允许通过手势去创建!(即没有权限)

通常是由于程序员想触发浏览器自动全屏显示而导致。但是很抱歉,此方法行不通,必须通过手势去创建,哪怕onload、trigger()、mouSEOver也触发不了!

官方解释

该Element.requestFullscreen()方法发出异步请求,使元素全屏显示。但不能保证元素将被放入全屏模式。

如果允许进入全屏模式,文档将收到一个fullscreenchange事件,让它知道它现在处于全屏模式。如果权限被拒绝,则文档会接收到一个fullscreenerror事件。

结论

可能出于用户操作体验的考虑吧,客户端javascript让浏览器全屏只能通过鼠标手势点击事件去触发,即click()。

原文链接:/js/44600.html

猜你在找的JavaScript相关文章