JS实现全屏展示的具体方法

JS实现全屏展示的具体方法

最近应公司的一个小需求，需要把一个 html 页面进行全屏控制的功能，虽然很简单但是苦于之前从未做过，今天就来实操一下，下边把具体的操作方法记录下来。

html 页面

实现全屏的功能代码：

function fullScreen() { var de = document.documentElement; if (de.requestFullscreen) { de.requestFullscreen(); } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); } }

退出全屏的功能代码：

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

有一点需要注意：当在 js 中使用 click 调用事件的时候会报错，（我使用的是火狐浏览器）

$("#btn").click(fullScreen()) // 注意会报错

或者，您必须在Firefox等onClick事件上调用该函数。

全屏

到此，基本的全屏功能就实现了。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。