用html5 js實現瀏覽器全屏
阿新 • • 發佈：2019-01-04
專案中需要將後臺瀏覽器的視窗全屏，也就是我們點選一個按鈕要實現按F11全屏的效果。 在HTML5中,W3C制定了關於全屏的API，就可以實現全螢幕的效果，也可以讓頁面中的圖片，視訊等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支援
全屏
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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();
}
|
退出全屏
| 1 2 3 4 5 6 7 8 9 10 11 12 |
if
(document.exitFullscreen) {
document.exitFullscreen();
}
else
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else
if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else
if (document.msExitFullscreen) {
document.msExitFullscreen();}
|
事件監聽
| 1 2 3 4 5 6 7 8 9 10 |
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);
|
全屏樣式設定
在瀏覽器全屏的使用我們還可以進行樣式設定
| 1 2 3 4 5 6 7 8 9 10 11 |
html:-moz-full-screen {
background:
red;
}
html:-webkit-full-screen {
background:
red;
}
html:fullscreen
{
background:
red;
}
|
附錄
1 一個線上的Demo
2 HTML5全屏API之網路釣魚
3 jquery封裝的全屏外掛
4 更加詳細的全屏API介紹
5 HTML5全屏API在FireFox/Chrome中的顯示差異