复制代码代码如下::
(function () {
var fullscreenapi = {
Unterstütztes Bildschirm: Falsch,
isFullscreen: function () {
false zurückgeben;
},
RequestFullreeScreen: function () {},
CancelFullScreen: function () {},
Fullscreeneventname: '',
Präfix: ''
},
browserprefixes = 'webkit moz o ms khtml'.split (' ');
// nach einem nativen Support prüfen
if (typeof document.cancelfulscreen! = 'undefined') {
Fullscreenapi.SupportSfullscreen = true;
} anders {
// Überprüfen Sie den Vollbildunterstützung nach dem Präfix des Anbieters
für (var i = 0, il = browserprefixes.length; i <il; i ++) {
fullscreenapi.prefix = browserprefixes [i];
if (typeof document [fullscreenapi.prefix + 'cancelFull -Screen']! = 'undefined') {
Fullscreenapi.SupportSfullscreen = true;
brechen;
}
}
}
// Methoden aktualisieren, um etwas Nützliches zu tun
if (fullscreenapi.Supportsfullscreen) {
fullscreenapi.fullscreeneventname = fullscreenapi.prefix + 'fullScreenchange';
fullscreenapi.isfullscreen = function () {
Switch (this.prefix) {
Fall '':
return document.fullscreen;
Fall 'Webkit':
Return -Dokument.Webkitisfulscreen;
Standard:
Rückgabedokument [this.prefix + 'fullscreen'];
}
}
fullscreenapi.requestfulscreen = function (el) {
return (this.prefix === '')? El.RequestfulScreen (): El [this.prefix + 'forderfullreencreen'] ();
}
fullscreenapi.cancelfulscreen = function (el) {
return (this.prefix === '')? document.cancelfullscreen (): document [this.prefix + 'cancelFullScreen'] ();
}
}
// JQuery Plugin
if (typeof jQuery! = 'undefined') {
jQuery.fn.Requestfullscreen = function () {
Gibt this.each (function () {zurück
if (fullscreenapi.Supportsfullscreen) {
fullscreenapi.requestfulscreen (this);
}
});
};
}
// API exportieren
window.fullscreenapi = fullscreenapi;
}) ();
$ (function () {
$ ("#FullscreenBtn"). Click (function () {
$ ("#Fullscreen"). forderfullscreen ();
});
if (window.top! = self) {
$ ("#Tipp"). Text ("iframe 里面不能演示该功能！请点击右下角的全屏查看！"). show ();
}
});
if (! fullscreenapi.Supportsfullscreen) {
ALERT ("您的破浏览器不支持全屏 api 哦 ， 请换高版本的 Chrome 或者 Firebox！");
}
复制代码代码如下::
<! DocType html>
<html>
<kopf>
<meta http-äquiv = "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>
</head>
<body>
<button id = "fullscreenBtn"> 点击我进入全屏模式 </button>
<div id = "fullscreen">
<h1>
我是全屏区域的内容！
</h1>
<div id = "tip" style = "display: keine;">
</div>
</div>
</body>
</html>
复制代码代码如下::
Körper{
Hintergrund: #fff;
}
Taste{
Grenze: 1PX Solid #CCC;
Cursor: Zeiger;
Anzeige: Block;
Rand: Auto;
Position: Relativ;
Oben: 100px;
}
.fullscreen {
Padding-Top: 10%;
Text-Align: Mitte;
Hintergrund: Keine Wiederholung von Scroll 0 0 #ffffff;
}
/ * Mozilla Vorschlag (Dash) */
.Fullscreen: Vollbildscreen {
Breite: 100%;
Höhe: 100%;
}
/ * W3c Vorschlag (kein Dash) */
.Fullscreen: Fullscreen {
Breite: 100%;
Höhe: 100%;
}
/ * derzeit arbeitende Anbieter -Präfixe *//
.Fullscreen: -webkit-full-Screen,.
Breite: 100%;
Höhe: 100%;
}
: -webkit-full-Screen {
Breite: 100%;
Höhe: 100%;
}