复制代码代码如下:
(función () {
var fullscreenapi = {
SupportSfullScreen: False,
isfulLscreen: function () {
devolver falso;
},
requestullScreen: function () {},
CancelfullScreen: function () {},
FullScreenEventName: '',
prefijo: ''
},
browserPrefixes = 'WebKit Moz O MS khtml'.split (' ');
// Verifique el soporte nativo
if (typeof document.cancelfullscreen! = 'Undefined') {
FullScreenapi.SupportSfullScreen = true;
} demás {
// Verifique el soporte de pantalla completa por prefijo de proveedores
para (var i = 0, il = browserprefixes.length; i <il; i ++) {
fullscreenapi.prefix = browserPrefixes [i];
if (typeof document [fullscreenapi.prefix + 'cancelfullscreen']! = 'indefinido') {
FullScreenapi.SupportSfullScreen = true;
romper;
}
}
}
// Actualizar métodos para hacer algo útil
if (fullscreenapi.supportsfullscreen) {
fullscreenapi.fullScreenEventName = fullscreenapi.prefix + 'fullscreenchange';
fullscreenapi.isfullScreen = function () {
switch (this.prefix) {
caso '':
return document.fullScreen;
Caso 'WebKit':
Documento de retorno. WebkitisFullScreen;
por defecto:
Documento de retorno [this.prefix + 'fullscreen'];
}
}
FullScreenapi.RequestFullScreen = function (El) {
return (this.prefix === '')? El.RequestFullScreen (): El [this.prefix + 'requestfulLscreen'] ();
}
FullScreenapi.CancelfullScreen = function (El) {
return (this.prefix === '')? document.cancEffullScreen (): document [this.prefix + 'cancelfullscreen'] ();
}
}
// complemento jQuery
if (typeof jQuery! = 'Undefined') {
jQuery.fn.RequestFullScreen = function () {
devuelve this.each (function () {
if (fullscreenapi.supportsfullscreen) {
FullScreenapi.RequestFullScreen (esto);
}
});
};
}
// API de exportación
Window.fullScreenapi = FullScreenapi;
}) ();
$ (function () {
$ ("#FullScreenBtn"). Click (function () {
$ ("#FullScreen"). SEQUILLEFLELSCREEN ();
});
if (window.top! = self) {
$ ("#tip"). Text ("iframe 里面不能演示该功能！请点击右下角的全屏查看！"). show ();
}
});
if (! Fullscreenapi.supportsfullScreen) {
alerta ("您的破浏览器不支持全屏 API 哦 ， 请换高版本的 Chrome 或者 Firebox！");
}
复制代码代码如下:
<! Doctype html>
<html>
<Evista>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> JavaScript 启用全屏 </title>
<script id = "jQuery_183" type = "text/javaScript" src = jQuery-1.8.3.min.js "> </script>
</ablo>
<Body>
<botón id = "fullscreenbtn"> 点击我进入全屏模式 </botón>
<div id = "Fullscreen">
<h1>
我是全屏区域的内容！
</h1>
<div id = "tip" style = "Display: None;">
</div>
</div>
</body>
</html>
复制代码代码如下:
cuerpo{
Antecedentes: #fff;
}
botón{
borde: 1px sólido #ccc;
cursor: puntero;
Pantalla: bloque;
margen: auto;
Posición: relativo;
arriba: 100px;
}
.fullscreen {
Top-top: 10%;
Text-Align: Center;
Antecedentes: ninguno repite el desplazamiento 0 0 #ffffff;
}
/ * Propuesta de Mozilla (Dash) */
.fullscreen: pantalla completa {
Ancho: 100%;
Altura: 100%;
}
/ * Propuesta W3C (sin tablero) */
.fullscreen: Fullscreen {
Ancho: 100%;
Altura: 100%;
}
/ * Actualmente funcionando con prefijos de proveedores */
.fullscreen: -webkit-full-screen, .fullscreen: -Moz-Full-Screen {
Ancho: 100%;
Altura: 100%;
}
: -webkit-full-screen {
Ancho: 100%;
Altura: 100%;
}