Until now, this is a great information, there are many browser that have implemented fullscreen supporting (Firefox, Chrome, Safari and must be a trick for Internet Explorer). That's so interesting for somebody want to do something with their website by make it fullscreen, may be great idea for webgame or something like that.
Previously, fullscreen only support for <video> html5 tag (to display a fullscreen video), but now, it could be support in any DOM element whether the part of a site. However, some difference principle for difference browser, because of there is not an uniform for that. This is current support method for some common browser:
| Mozilla Proposal | Chrome/Safari | Firefox | W3C Proposal | Function |
|---|---|---|---|---|
| .requestFullScreen() | .webkitRequestFullScreen() | .mozRequestFullScreen() | .requestFullscreen() | Start request to make an element fullscreen |
| .cancelFullScreen() | .webkitCancelFullScreen() | .mozCancelFullScreen() | .exitFullscreen() | Exit fullscreen mode |
| .fullScreen | .webkitIsFullScreen | .mozfullScreen | None currently | Boolean flag to check is in fullscreen mode |
| :full-screen | :-webkit-full-screen | :-moz-full-screen | :fullscreen | CSS pseudo-class apply to the element in fullscreen mode |
| fullscreeneventchange | webkitfullscreeneventchange | .mozfullscreenchange | .fullscreeneventchange | Fullscreen mode changed event name |
| fullscreendenied | . | Fullscreen user denied event name (for future) |
The mozilla proposal seem like the standard and the current support browsers such as Chrome, Safari, Firefox only append the prefix to it. Internet Explorer and Opera do not support native fullscreen function right now, but for the future, may be Microsoft will use "ms" prefix and Opera like "o" prefix.
Example: request fullscreen in Chrome/Safari:
- if(typeof document.webkitCancelFullScreen!='undefined'&& document.webkitIsFullScreenEnabled===true){
- element.webkitRequestFullScreen();
- document.webkitCancelFullScreen();
- }
What should we do is checking for the browser that user is using and then use the correct method to request fullscreen display. John Dyer has create a usefull object that can work standalone or become a jQuery plugin, it may be work correctly on IE and Opera in the future, thank to John Dyer. But we have already improved it for working with IE as follow:
- (function(){
- var
- fullScreenApi ={
- supportsFullScreen:false,
- nonNativeSupportsFullScreen:false,
- isFullScreen:function(){returnfalse;},
- requestFullScreen:function(){},
- cancelFullScreen:function(){},
- fullScreenEventName:'',
- prefix:''
- },
- browserPrefixes ='webkit moz o ms khtml'.split('');
- // check for native support
- if(typeof document.cancelFullScreen!='undefined'){
- fullScreenApi.supportsFullScreen=true;
- }else{
- // check for fullscreen support by vendor prefix
- for(var i =0, il = browserPrefixes.length; i < il; i++){
- fullScreenApi.prefix= browserPrefixes[i];
- if(typeof document[fullScreenApi.prefix+'CancelFullScreen']!='undefined'){
- fullScreenApi.supportsFullScreen=true;
- break;
- }
- }
- }
- // update methods to do something useful
- if(fullScreenApi.supportsFullScreen){
- fullScreenApi.fullScreenEventName= fullScreenApi.prefix+'fullscreenchange';
- fullScreenApi.isFullScreen=function(){
- switch(this.prefix){
- case'':
- return document.fullScreen;
- case'webkit':
- return document.webkitIsFullScreen;
- default:
- return document[this.prefix+'FullScreen'];
- }
- }
- fullScreenApi.requestFullScreen=function(el){
- return(this.prefix==='')? el.requestFullScreen(): el[this.prefix+'RequestFullScreen']();
- }
- fullScreenApi.cancelFullScreen=function(el){
- return(this.prefix==='')? document.cancelFullScreen(): document[this.prefix+'CancelFullScreen']();
- }
- }
- elseif(typeof window.ActiveXObject!=="undefined"){// IE.
- fullScreenApi.nonNativeSupportsFullScreen=true;
- fullScreenApi.requestFullScreen= fullScreenApi.requestFullScreen=function(el){
- var wscript =new ActiveXObject("WScript.Shell");
- if(wscript !==null){
- wscript.SendKeys("{F11}");
- }
- }
- fullScreenApi.isFullScreen=function(){
- return document.body.clientHeight== screen.height&& document.body.clientWidth== screen.width;
- }
- }
- // jQuery plugin
- if(typeof jQuery !='undefined'){
- jQuery.fn.requestFullScreen=function(){
- returnthis.each(function(){
- if(fullScreenApi.supportsFullScreen){
- fullScreenApi.requestFullScreen(this);
- }
- });
- };
- }
- // export api
- window.fullScreenApi= fullScreenApi;
- })();
How to use? First, add the Fullscreen api above to your webpage (must be after jQuery init if you want to make it work as a jQuery plugin). Call the fullScreenApi.requestFullScreen() function in your button click event or using $(element).requestFullScreen() as jQuery plugin, example:
- <html>
- <head>
- <script>
- <!-- Fullscreen API -->
- </script>
- </head>
- <body>
- <buttononclick="fullScreenApi.requestFullScreen(document.documentElement)"/>
- </body>
- </html>
Example:
This is native fullscreen support demo of John Dyer: http://johndyer.name/lab/fullscreenapi/
Note: There is a small problem with default IE 9 security setting. IE 9 browser security must be allow ActiveX control by go to Tool / Internet Options, at Sercurity tab, click Custom Level button, find "Initialize and script ActiveX control not marked as safe." option and change it to Prompt or Enable.
To do something when switched between fullscreen mode and normal mode. We could use:
- if(fullScreenApi.supportsFullScreen)
- {
- element.addEventListener(fullScreenApi.fullScreenEventName,function(e){
- if(fullScreenApi.fullScreen){
- /* do when fullscreen */
- }else{
- /* do when is not fullscreen */
- }
- },true);
The eventListener above is proposed by W3C and Mozila. It doesn't work in Internet Explorer, for IE, we could use:
- window.onresize=function(){
- if(fullScreenApi.isFullScreen())
- {
- alert('fullscreen');
- }
- }
The code above also work for other browser too. Althought we should use proposal unless can:
- if(fullScreenApi.supportsFullScreen){
- window.addEventListener(fullScreenApi.fullScreenEventName,function(e){
- if(fullScreenApi.isFullScreen()){
- doWhenFullScreen();
- }
- else{
- doWhenNotFullScreen();
- }
- },true);
- }
- elseif(fullScreenApi.nonNativeSupportsFullScreen){
- //Only notify when fullscreen state changed, so save the last state
- fullScreenApi.lastState= fullScreenApi.isFullScreen();
- window.onresize=function(){
- //Check is duplicated
- if(fullScreenApi.lastState!= fullScreenApi.isFullScreen()){
- fullScreenApi.lastState= fullScreenApi.isFullScreen()
- if(fullScreenApi.isFullScreen()){
- doWhenFullScreen();
- }
- else{
- doWhenNotFullScreen();
- }
- }
- };
- }
Which the FullScreen API above, we can set fullscreen DOM element in Chrome/Safari/Firefox and switch browser to fullscreen mode in Internet Explorer. Other browser such as Opera is not support fullscreen right now. We could use standard method such as open new webpage in fullscreen or just detect what browser user is using and notify them to change another browser. This is standard javascript code to open new fullscreen window:
- window.open('http://www.rdpslides.com/index.html','','fullscreen=yes, scrollbars=auto');
Hope that help!