Home > Web Front-end > JS Tutorial > Use html5 js to achieve full-screen browser effect by clicking a button_javascript skills

Use html5 js to achieve full-screen browser effect by clicking a button_javascript skills

WBOY
Release: 2016-05-16 16:46:37
Original
1290 people have browsed it

In the project, we need to make the background browser window full screen, that is, we click a button to achieve the full screen effect of pressing F11. In HTML5, W3C has developed a full-screen API, which can achieve full-screen effects, and can also make pictures, videos, etc. on the page full-screen. Currently, only Google Chrome 15, safri5.1, firfox10, and IE11 support

Full screen

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();

}
Copy after login

Exit full screen

 if (document.exitFullscreen) { 
document.exitFullscreen(); 
} 
else if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} 
else if (document.webkitCancelFullScreen) { 
document.webkitCancelFullScreen(); 
} 
else if (document.msExitFullscreen) { 
document.msExitFullscreen(); 
} 
Copy after login

Event monitoring

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); 
Copy after login

Full screen style settings

We can also set the style when using the browser in full screen

html:-moz-full-screen { 
background: red; 
} 

html:-webkit-full-screen { 
background: red; 
} 

html:fullscreen { 
background: red; 
} 
Copy after login

Appendix

1 An online Demo

http://robnyman.github.io/fullscreen/

2 HTML5 Full Screen API Phishing

http://www.36ria.com/5807

3 Full-screen plug-in encapsulated by jquery

 http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

4 A more detailed introduction to the full-screen API

4.1 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

4.2 https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

5 Display differences of HTML5 full-screen API in FireFox/Chrome

http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template