A full-screen plug-in supporting chrome and firefox

Plug-in code

(Function (){
Var fullScreenApi = {
SupportsFullScreen: false,
IsFullScreen: function () {return false ;},
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 + 'fullscreenchang ';
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 '] ();
}
}
// JQuery plugin
If (typeof jQuery! = 'Undefined '){
JQuery. fn. requestFullScreen = function (){
Return this. each (function (){
If (fullScreenApi. supportsFullScreen ){
FullScreenApi. requestFullScreen (this );
}
});
};
}
Window. fullScreenApi = fullScreenApi;
})();
Call Code

$ (Function (){
$ ('# Fullscreenbtn'). click (function (){
If (window. fullScreenApi. supportsFullScreen ){
Window. fullScreenApi. requestFullScreen (document. getElementById ('fullscreenbox '));
} Else {
Alert ('your browser, basically say goodbye to the full screen function ');
}
});
});
HTML code structure

<A id = "fullscreenbtn">

</A>
Based on the fullscreen function, we can make a lot of results, such as album:
Http://eikes.github.com/jquery.fullscreen.js/
For example, the full screen function in the video:
Http://mediaelementjs.com/
Of course, it cannot be said that the use of full screen windows in my HoorayOS is:
Http://www.hoorayos.com/

 




Author: Hu yunrui