Copy Code code as follows:
(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 + ' 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 '] ();
}
}
JQuery Plugin
if (typeof jQuery!= ' undefined ') {
JQuery.fn.requestFullScreen = function () {
Return This.each (function () {
if (Fullscreenapi.supportsfullscreen) {
Fullscreenapi.requestfullscreen (this);
}
});
};
}
Export API
Window.fullscreenapi = Fullscreenapi;
})();
$ (function () {
$ ("#fullScreenBtn"). Click (function () {
$ ("#fullScreen"). Requestfullscreen ();
});
if (Window.top!= self) {
$ ("#tip"). Text ("The IFrame cannot demonstrate this feature!") Please click on the bottom right corner of the full screen view! "). Show ();
}
});
if (!fullscreenapi.supportsfullscreen) {
Alert ("Your broken browser does not support Full-screen APIs Oh, please change to a newer version of Chrome or firebox! ");
}
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>javascript Enable Full-screen </title>
<script id= "jquery_183" type= "Text/javascript" class= "library" Src=jquery-1.8.3.min.js "></script>
<body>
<button id= "Fullscreenbtn" > click me into full-screen mode </button>
<div id= "fullscreen" class= "fullscreen" >
I am the content of Full-screen area!
<div id= "Tip" style= "display:none;" >
</div>
</div>
</body>
Copy code code as follows:
body{
Background: #fff;
}
button{
border:1px solid #ccc;
Cursor:pointer;
Display:block;
Margin:auto;
position:relative;
top:100px;
}
. fullscreen{
padding-top:10%;
Text-align:center;
Background:none Repeat scroll 0 0 #FFFFFF;
}
* Mozilla Proposal (DASH) * *
. fullscreen:full-screen {
width:100%;
height:100%;
}
/* Proposal (no dash) * *
. fullscreen:fullscreen {
width:100%;
height:100%;
}
/* Currently working vendor prefixes * *
. Fullscreen:-webkit-full-screen,. Fullscreen:-moz-full-screen {
width:100%;
height:100%;
}
:-webkit-full-screen{
width:100%;
height:100%;
}