复制代码代码如下:
(fonction () {
var fullScreenapi = {
SupportsfullScreen: False,
IsullScreen: function () {
retourne false;
},
requestfullScreen: function () {},
AnnulefullScreen: function () {},
FullScreeneventName: '',
préfixe: ''
},
BrowserPrefixes = 'webkit moz o ms khtml'.split (' ');
// Vérifiez le support natif
if (typeof document.cancelfullScreen! = 'undefined') {
FullScreenapi.SupportsfullScreen = true;
} autre {
// Vérifiez la prise en charge de l'écran complet par le préfixe du fournisseur
pour (var i = 0, il = BrowserPrefixes.length; i <il; i ++) {
fullScreenapi.Prefix = BrowserPrefixes [i];
if (typeof document [fullscreenapi.prefix + 'annuelfullScreen']! = 'undefined') {
FullScreenapi.SupportsfullScreen = true;
casser;
}
}
}
// Mette à jour les méthodes pour faire quelque chose d'utile
if (fullScreenapi.SupportsfullScreen) {
fullScreenapi.fullScreeneventName = fullScreenapi.prefix + 'fullScreenchange';
fullScreenapi.isfullScreen = function () {
commutateur (this.prefix) {
cas '':
retour document.fullScreen;
case «webkit»:
Document de retour.WebKitisfullScreen;
défaut:
Retour document [this.prefix + 'fullccreen'];
}
}
fullScreenapi.RequestfullScreen = fonction (el) {
return (this.prefix === '')? el.requestfullScreen (): el [this.prefix + 'requestfullScreen'] ();
}
FullScreenapi.CancelfullScreen = fonction (el) {
return (this.prefix === '')? document.cancelfullScreen (): document [this.prefix + 'ansemblfullScreen'] ();
}
}
// plugin jQuery
if (typeof jQuery! = 'Undefined') {
jQuery.fn.RequestfullScreen = function () {
return this.each (function () {
if (fullScreenapi.SupportsfullScreen) {
FullScreenapi.RequestfullScreen (this);
}
});
};
}
// API d'exportation
window.fullScreenapi = fullScreenapi;
}) ();
$ (function () {
$ ("# fullScreenbtn"). Cliquez sur (fonction () {
$ ("# fullScreen"). demandesfullScreen ();
});
if (window.top! = self) {
$ ("# tip"). text ("iframe 里面不能演示该功能！请点击右下角的全屏查看！"). show ();
}
});
if (! FullScreenapi.SupportsfullScreen) {
alerte ("您的破浏览器不支持全屏 api 哦 ， 请换高版本的 Chrome 或者 Firebox！");
}
复制代码代码如下:
<! Doctype html>
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<Title> JavaScript 启用全屏 </TITME>
<script id = "jQuery_183" type = "text / javascript" src = jQuery-1.8.3.min.js "> </ script>
</ head>
<body>
<Button id = "FullScreenbtn"> 点击我进入全屏模式 </futton>
<div id = "plein écran">
<h1>
我是全屏区域的内容！
</h1>
<div id = "tip" style = "affichage: aucun;">
</div>
</div>
</docy>
</html>
复制代码代码如下:
corps{
Contexte: #FFF;
}
bouton{
Border: 1px solide #ccc;
curseur: pointeur;
Affichage: bloc;
marge: auto;
Position: relative;
En haut: 100px;
}
.fullScreen {
Tapon de rembourrage: 10%;
Texte-aligne: Centre;
CONTEXTE: None répéter le défilement 0 0 #ffffff;
}
/ * Proposition de Mozilla (Dash) * /
.fullScreen: plein écran {
Largeur: 100%;
hauteur: 100%;
}
/ * Proposition W3C (pas de tableau de bord) * /
.fullScreen: plein écran {
Largeur: 100%;
hauteur: 100%;
}
/ * Préfixes de fournisseur qui travaillent actuellement * /
.fullScreen: -webkit-full-écran, .fullScreen: -moz-full-écran {
Largeur: 100%;
hauteur: 100%;
}
: -webkit-full-écran {
Largeur: 100%;
hauteur: 100%;
}