建站资讯

适配各种访问器用html5+js完成访问器全屏幕【唐山

作者:admin 发布时间:2020-11-19
本工作中室关键业务流程:企业网站建设-互联网营销推广-虚似服务器-室内空间网站域名-社区论坛维护保养升級安裝等.. 顾客服务
新项目中必须将后台管理访问器的对话框全屏幕,也便是大家点一下一个按键要完成按F11全屏幕的实际效果。 在HTML5中,W3C制订了有关全屏幕的API,便可以完成全屏幕幕的实际效果,还可以让网页页面中的照片,视頻等全屏幕现阶段仅有google chrome 15 +, safri5.1+,firfox10+,IE11适用

全屏幕

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 (elem.msRequestFullscreen) {

elem.msRequestFullscreen();

}

撤出全屏幕

if (document.exitFullscreen) {

document.exitFullscreen();

}

else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

}

else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

}

else if (document.msExitFullscreen) {

document.msExitFullscreen();

}

恶性事件监视

document.addEventListener("fullscreenchange", function () {

fullscreenState.innerHTML = (document.fullscreen) "" : "not ";}, false);

document.addEventListener("mozfullscreenchange", function () {

fullscreenState.innerHTML = (document.mozFullScreen) "" : "not ";}, false);

document.addEventListener("webkitfullscreenchange", function () {

fullscreenState.innerHTML = (document.webkitIsFullScreen) "" : "not ";}, false);

document.addEventListener("msfullscreenchange", function () {

fullscreenState.innerHTML = (document.msFullscreenElement) "" : "not ";}, false);

全屏幕款式设定

在访问器全屏幕的应用大家还能够开展款式设定

html:-moz-full-screen {

background: red;

}

html:-webkit-full-screen {

background: red;

}

html:fullscreen {

background: red;

}

附录

1 一个线上的Demo

fullscreen/

2 HTML5全屏幕API之互联网垂钓

5807

3 jquery封裝的全屏幕软件

native-fullscreen-javascript-api-plus-jquery-plugin/

4 更为详尽的全屏幕API详细介绍

4.1en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

4.2 hg/fullscreen/raw-file/


收缩