1、引用FullScreen.js文件 以下是js代码
/* Native FullScreen JavaScript API CopyRight: Johndyer, http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ ------------- Assumes Mozilla naming conventions instead of W3C for now */ (function() { var fullScreenApi = { supportsFullScreen: false, isFullScreen: function() { return false; }, requestFullScreen: function() {}, cancelFullScreen: function() {}, fullScreenEventName: ‘‘, prefix: ‘‘ }, browserPrefixes = ‘webkit moz o ms khtml‘.split(‘ ‘); // check for native support if (typeof document.cancelFullScreen != ‘undefined‘) { fullScreenApi.supportsFullScreen = true; } else { // check for fullscreen support by vendor prefix for (var i = 0, il = browserPrefixes.length; i < il; i++ ) { fullScreenApi.prefix = browserPrefixes[i]; if (typeof document[fullScreenApi.prefix + ‘CancelFullScreen‘ ] != ‘undefined‘ ) { fullScreenApi.supportsFullScreen = true; break; } } } // update methods to do something useful if (fullScreenApi.supportsFullScreen) { fullScreenApi.fullScreenEventName = fullScreenApi.prefix + ‘fullscreenchange‘; fullScreenApi.isFullScreen = function() { switch (this.prefix) { case ‘‘: return document.fullScreen; case ‘webkit‘: return document.webkitIsFullScreen; default: return document[this.prefix + ‘FullScreen‘]; } } fullScreenApi.requestFullScreen = function(el) { return (this.prefix === ‘‘) ? el.requestFullScreen() : el[this.prefix + ‘RequestFullScreen‘](); } fullScreenApi.cancelFullScreen = function(el) { return (this.prefix === ‘‘) ? document.cancelFullScreen() : document[this.prefix + ‘CancelFullScreen‘](); } } // jQuery plugin if (typeof jQuery != ‘undefined‘) { jQuery.fn.requestFullScreen = function() { return this.each(function() { if (fullScreenApi.supportsFullScreen) { fullScreenApi.requestFullScreen(this); } }); }; } // export api window.fullScreenApi = fullScreenApi; })();
2、实现全屏效果（目前只有FF Chrome safari 支持）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="FullScreen.js"></script>
<script type="text/javascript">
window.onload = function(){
if(fullScreenApi.supportsFullScreen){
var full = document.getElementById("btnFull");
var exit = document.getElementById("exitFull");
full.onclick = function(){
fullScreenApi.requestFullScreen(document.documentElement);
}
exit.onclick = function(){
fullScreenApi.cancelFullScreen();
}
}else{
alert("您的浏览器不支持全屏");
}
}
</script>
<style type="text/css">
p{font-size:60px;color:#0FF;font-weight:bold;}
</style>
</head>
<body>
<p>别以为老子好欺负！</p>
<input type="button" value="全屏" id="btnFull" /><input type="button" value="推出全屏" id="exitFull" />
</body>
</html>