复制代码代码如下 :
(기능 () {
var fullscreenapi = {
Supportsfullscreen : False,
Isfullscreen : function () {
거짓을 반환합니다.
},
requestfullscreen : function () {},
cancelfullscreen : function () {},
FullScreeneventName : '',
접두사 : ''
},
BrowserPrefixes = 'WebKit Moz o MS Khtml'.split (' ');
// 기본 지원을 확인하십시오
if (typeof document.cancelfullscreen! = 'undefined') {
FullScreenapi.supportsfullscreen = true;
} 또 다른 {
// 공급 업체 접두사의 전체 화면 지원을 확인하십시오
for (var i = 0, il = browserprefixes.length; i <il; i ++) {
fullScreenapi.prefix = BrowserPrefixes [i];
if (typeof document [fullscreenapi.prefix + 'cancelfullscreen']! = 'undefined') {
FullScreenapi.supportsfullscreen = true;
부서지다;
}
}
}
// 유용한 작업을 수행하기위한 방법을 업데이트합니다
if (fullscreenapi.supportsfullscreen) {
fullScreenapi.fullScreeneventName = fullScreenapi.prefix + 'fullScreenchange';
fullscreenapi.isfullscreen = function () {
스위치 (this.prefix) {
사례 '':
return document.fullscreen;
사례 'webkit':
return document.webkitisfullscreen;
기본:
반환 문서 [this.prefix + 'FullScreen'];
}
}
fullScreenapi.requestfullscreen = function (el) {
반환 (this.prefix === '')? el.requestfullscreen () : el [this.prefix + 'requestfullscreen'] ();
}
fullscreenapi.cancelfullscreen = function (el) {
반환 (this.prefix === '')? document.cancelfullscreen () : document [this.prefix + 'cancelfullscreen'] ();
}
}
// jQuery 플러그인
if (jQuery typeof! = 'undefined') {
jquery.fn.requestfullscreen = function () {
reture this.each (function () {
if (fullscreenapi.supportsfullscreen) {
fullScreenapi.requestfullscreen (this);
}
});
};
}
// API 내보내기
Window.fullscreenapi = FullScreenapi;
}) ();
$ (function () {
$ ( "#fullScreenbtn"). 클릭 (function () {
$ ( "#fullScreen"). requestFullScreen ();
});
if (window.top! = self) {
$ ( "#tip"). text ( "iframe 里面不能演示该功能！请点击右下角的全屏查看！"). show ();
}
});
if (! fullscreenapi.supportsfullscreen) {
Alert ( "您的破浏览器不支持全屏 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>
<body>
<button id = "fullScreenBtn"> 点击我进入全屏模式 </button>
<div id = "FullScreen">
<H1>
我是全屏区域的内容！
</h1>
<div id = "tip"style = "display : none;">
</div>
</div>
</body>
</html>
复制代码代码如下 :
몸{
배경 : #fff;
}
단추{
국경 : 1px Solid #CCC;
커서 : 포인터;
디스플레이 : 블록;
마진 : 자동;
위치 : 상대;
상단 : 100px;
}
.fullscreen {
패딩 탑 : 10%;
텍스트 정렬 : 센터;
배경 : 없음 스크롤 0 0 #ffffff;
}
/ * Mozilla 제안 (Dash) */
.fullscreen : 전체 화면 {
너비 : 100%;
높이 : 100%;
}
/ * W3C 제안 (대시 없음) */
.fullscreen : 전체 화면 {
너비 : 100%;
높이 : 100%;
}
/ * 현재 작업하는 공급 업체 접두사 */
.fullscreen : -webkit-full-screen, .fullscreen : -moz-wull-screen {
너비 : 100%;
높이 : 100%;
}
: -webkit-full-screen {
너비 : 100%;
높이 : 100%;
}