复制代码代码如下：
（功能 （） {
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％；
}