複製代碼代碼如下：
（功能 （） {
var fullscreenapi = {
supportsfullscreen：false，
isfullscreen：function（）{
返回false;
}，，
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（）{
switch（this.prefix）{
案件 ''：
返回document.fullscreen;
案例“ webkit”：
返回文檔。
預設:
返回文檔[this.prefix +'fullscreen'];
}
}
fullScreenapi.Requestfullscreen =函數（el）{
返回（this.prefix ===''）？ el.requestfullscreen（）：el [this.prefix +'requestfullscreen']（）;
}
fullscreenapi.cancelfullscreen = function（el）{
返回（this.prefix ===''）？ document.cancelfullscreen（）：document [this.prefix +'cancelfullscreen']（）;
}
}
// jQuery插件
如果（jquery！='undefined'）{
jquery.fn.requestfullscreen = function（）{
返回this.each（function（）{
if（fullscreenapi.supportsfullscreen）{
fullscreenapi.requestfullscreen（this）;
}
}）;
};
}
//導出API
window.fullscreenapi = fullscreenapi;
}）（）;
$（function（）{
$（“＃fullscreenbtn”）。單擊（function（）{
$（“＃fullscreen”）。
}）;
如果（window.top！= self）{
$（“＃tip”）。text（“ iframe 裡面不能演示該功能！請點擊右下角的全屏查看！”）。show（）;
}
}）;
如果（！fullscreenapi.supportsfullscreen）{
警報（“您的破瀏覽器不支持全屏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.3.min.js”> </script>> </script>
</head>
<身體>
<button ID =“ fullscreenbtn”>點擊我進入全屏模式</button>
<div ID =“ FullScreen”>
<H1>
我是全屏區域的內容！
</h1>
<div ID =“ tip”樣式=“ display：none;”>
</div>
</div>
</body>
</html>
複製代碼代碼如下：
身體{
背景：#fff;
}
按鈕{
邊界：1PX實心#CCC;
光標：指針；
顯示：塊;
保證金：自動；
位置：相對；
頂部：100px;
}
.全螢幕{
填充：10％；
文字平衡：中心；
背景：無重複滾動0 0 #ffffff;
}
/ * Mozilla提案（DASH） */
.fullscreen：全屏{
寬度：100％；
身高：100％；
}
/ * W3C提案（無破折號） */
.fullscreen：Fullscreen {
寬度：100％；
身高：100％；
}
/ *當前有效的供應商前綴 */
。
寬度：100％；
身高：100％；
}
：-webkit-full-screen {
寬度：100％；
身高：100％；
}