This article mainly introduces the use of browser Full-screen API to implement JS full screen code example, the example of using jquery, the address of the library to change their own, we refer to the use of the
The code is 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! ");
}
The code is 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>
The code is 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%;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
