Using html5js to achieve full screen browser effect by clicking a button _ javascript tips-js tutorial

Source: Internet
Author: User
Click a button to achieve full screen press F11. In HTML5, W3C has developed an API for full screen to achieve full screen effects. In the project, the full screen window of the background browser is required, that is, we click a button to achieve the F11 full screen effect. In HTML5, W3C has developed an API for full screen to achieve full screen effects. It can also enable full screen effects such as images and videos on pages. Currently, only google chrome 15 +, safri5.1 +, supported by firfox10 + and IE11

Full Screen

Var docElm = document.doc umentElement; // W3C if (docElm. requestFullscreen) {docElm. requestFullscreen ();} // FireFox else if (docElm. required requestfullscreen) {docElm. optional requestfullscreen ();} // else if (docElm. webkitRequestFullScreen) {docElm. webkitRequestFullScreen ();} // IE11else if (elem. msRequestFullscreen) {elem. msRequestFullscreen ();}

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

Event listening

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

Full Screen style settings

You can also set the style when using full screen in the browser.

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

Appendix

1. An Online Demo

Http://robnyman.github.io/fullscreen/

2 HTML5 full-screen API phishing

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

3. jquery-encapsulated full-screen plug-in

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

4. More detailed full-screen API Introduction

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 HTML5 full-screen API display differences in FireFox/Chrome

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.