今天有个小功能要写,就是利用 JS 代码来实现浏览器的全屏模式与退出浏览器全屏模式,自己网上也收集过一些相关的代码,分享出来,供大家参考一下。
js 实现浏览器全屏与退出全屏幕的方法
js函数代码:
<script> //浏览器全屏 function fullScreen() { var el = document.documentElement; var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; if (rfs) { rfs.call(el); } else if (typeof window.ActiveXObject !== "undefined") { //IE浏览器,模拟按下F11全屏 var wscript = new ActiveXObject("WScript.Shell"); if (wscript != null) { wscript.SendKeys("{F11}"); } } } //浏览器退出全屏 function exitScreen() { var el = document; var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen; if (cfs) { cfs.call(el); } else if (typeof window.ActiveXObject !== "undefined") { //IE浏览器,模拟按下F11键退出全屏 var wscript = new ActiveXObject("WScript.Shell"); if (wscript != null) { wscript.SendKeys("{F11}"); } } } </script>
注意:
上面的函数必须要以 html 点击事件来触发,不能直接调用函数,否则会报以下的错误
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture
大概的意思是:函数不能直接调用,要使用事件来触发。
函数事件调用方法:
html 代码:
<button onclick="fullScreen()">全屏</button> <button onclick="exitScreen()">退出全屏</button>
js之切换全屏和退出全屏实现代码实例
如果你感觉上面例子中的代码,有些难懂,可以使用下这个示例中的代码,比较好理解,实现的效果是一样的。
js代码:
<script> //浏览器全屏 function fullScreen() { var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } //Chrome等 else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } //IE11 else if (docElm.msRequestFullscreen) { document.body.msRequestFullscreen(); } } //浏览器退出全屏 function exitScreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else { window.parent.showTopBottom(); } } </script>
调用方法:
<button onclick="fullScreen()">全屏</button> <button onclick="exitScreen()">退出全屏</button>
关于全屏与退出全屏,各个浏览器的事件操作
操作 | 浏览器 | 代码 |
---|---|---|
全屏 | W3C | de.requestFullscreen() |
全屏 | CHROME | de.webkitRequestFullScreen() |
全屏 | FIREFOX | de.mozRequestFullScreen() |
全屏 | IE | de.msRequestFullscreen() |
还原 | W3C | document.exitFullscreen() |
还原 | CHROME | document.webkitCancelFullScreen() |
还原 | FIREFOX | document.mozCancelFullScreen() |
还原 | IE | document.msExitFullscreen() |
以上就是javascript 如何实现全屏与退出全屏的方法好代码教程。愿我们上半年所有的遗憾,都是下半年惊喜的铺垫,加油吧。更多关于javascript 如何实现全屏与退出全屏的方法好代码教程请关注haodaima.com其它相关文章!