时间:2021-05-26
JS 全屏和退出全屏
js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌、火狐、360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏)。
这个demo基本是够了,直接复制下面的源码另存为html文件看效果吧。
//退出全屏 判断浏览器种类
感谢阅读,希望嫩帮助到大家,谢谢大家对本站的支持!
以下是其它网友的补充
我们知道,浏览器全屏通常按快捷键F11。JS控制浏览器全屏也不稀奇,它让Web应用看上去更像似原生软件应用效果。比如点餐系统、叫号系统等等。
JS让浏览器全屏及退出全屏的方法网上很多,这不是重点,重点是需注意:浏览器全屏只能通过鼠标手势点击事件去触发。
JS全屏方法
var $fullScreen = document.getElementById("js-fullScreen");//按钮 if ($fullScreen) { $fullScreen.addEventListener("click", function () { var docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.msRequestFullscreen) { docElm.msRequestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, false); }JS退出全屏方法
var $cancelFullScreen = document.getElementById("js-cancelFullScreen"); if ($cancelFullScreen) { $cancelFullScreen.addEventListener("click", function () { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } }, false); }控制台警告
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()。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了js实现简单页面全屏,供大家参考,具体内容如下全屏效果为传入div元素全屏:代码块js控制页面的全屏展示和退出全屏显示js控制页面的全屏展示
本文实例为大家分享了js模拟F11页面全屏显示的具体代码,供大家参考,具体内容如下测试全屏全屏按钮退出全屏varbtn=document.getElementB
本文实例为大家分享了js全屏事件fullscreenchange,实现全屏、退出全屏操作,供大家参考,具体内容如下1.进入全屏functionlaunchFul
本文实例讲述了android编程开发之全屏和退出全屏的实现方法。分享给大家供大家参考,具体如下:xml代码:java代码:privatestaticboolea
这篇文章主要介绍了js之切换全屏和退出全屏实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下应用场景