复制代码代码如下:
(function () {
var fullScreenapi = {
Поддержка
isfullScreen: function () {
вернуть ложь;
},
requestLlScreen: function () {},
CancelfullScreen: function () {},
FullScreenEventName: '',
Префикс: ''
},
browserprefixes = 'webkit moz o ms khtml'.split (' ');
// Проверка на собственную поддержку
if (typeof document.cancelfullscreen! = 'undefined') {
FullScreenapi.supportSulllScreen = true;
} еще {
// Проверка на получение полноэкранной поддержки с помощью префикса поставщика
for (var i = 0, il = browserprefixes.length; i <il; i ++) {
FullScreenapi.prefix = BrowserPrefixes [i];
if (typeof document [fullScreenapi.prefix + 'CancelfullScreen']! = 'не определено') {
FullScreenapi.supportSulllScreen = true;
перерыв;
}
}
}
// обновить методы, чтобы сделать что -то полезное
if (fullScreenapi.supportsFullScreen) {
FullScreenapi.fullScreenEventName = FullScreenapi.prefix + 'fullScreenchange';
FullScreenapi.isfullScreen = function () {
Switch (this.prefix) {
случай '':
return Document.fullScreen;
case 'webkit':
return Document.WebkitisullScreen;
по умолчанию:
вернуть документ [this.prefix + 'FullScreen'];
}
}
FullScreenapi.requestfullScreen = function (el) {
return (this.prefix === '')? el.requestfullscreen (): el [this.prefix + 'requestllscreen'] ();
}
FullScreenapi.cancelfullscreen = function (el) {
return (this.prefix === '')? document.cancelfullscreen (): документ [this.prefix + 'cancelfullscreen'] ();
}
}
// плагин jquery
if (typeof jquery! = 'не определено') {
jquery.fn.requestfullscreen = function () {
вернуть это.
if (fullScreenapi.supportsFullScreen) {
FullScreenapi.RequestfullScreen (это);
}
});
};
}
// Экспорт API
window.fullScreenapi = FullScreenapi;
}) ();
$ (function () {
$ ("#fullScreenbtn"). Click (function () {
$ ("#FullScreen"). QUEREFULLLSCREEN ();
});
if (window.top! = self) {
$ ("#tip"). Текст ("iframe 里面不能演示该功能！请点击右下角的全屏查看！"). Show ();
}
});
if (!
оповещение ("您的破浏览器不支持全屏 API 哦 ， 请换高版本的 Chrome 或者 Firebox！");
}
复制代码代码如下:
<! Doctype html>
<html>
<голова>
<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>
</head>
<тело>
<button id = "fullScreenbtn"> 点击我进入全屏模式 </button>
<div id = "FullScreen">
<h1>
我是全屏区域的内容！
</h1>
<div id = "tip" style = "display: none;">
</div>
</div>
</body>
</html>
复制代码代码如下:
тело{
Фон: #fff;
}
кнопка{
Граница: 1PX SOLID #CCC;
курсор: указатель;
дисплей: блок;
Порность: Авто;
позиция: относительно;
Верх: 100px;
}
.полноэкранный{
надоеволок: 10%;
Текст-альбом: Центр;
Фон: нет повторить прокрутку 0 0 #ffffff;
}
/ * Предложение Mozilla (DASH) */
.fullScreen: полноэкранная {
Ширина: 100%;
высота: 100%;
}
/ * Предложение W3C (без DASH) */
.fullScreen: FullScreen {
Ширина: 100%;
высота: 100%;
}
/ * В настоящее время префиксы работающих поставщиков *//
.fullScreen: -webkit-full-Ecrreen, .fullScreen: -moz-full-экран {
Ширина: 100%;
высота: 100%;
}
: -Webkit-full-экран {
Ширина: 100%;
высота: 100%;
}