实现效果
JS实现浏览器全屏
实现方式对比
1、ActiveXObject 只支持IE
2、FullScreen（HTML方法）支持 Chrome 15 / Firefox Nightly / Safari 5.1
备注：方法二 FullScreen Javascript API 目前仍是草案，实现这个 API，更确切来说是具有这项功能的浏览器有：Chrome 15 / Firefox Nightly / Safari 5.1。
其他方法：flash特性（google关键字 flash 全屏）
代码示例
<html>
<head>
<script type="text/javascript" language="javascript">
//方法一：ActiveXObject 只支持IE
//方法二：FullScreen（HTML方法）支持 Chrome 15 / Firefox Nightly / Safari 5.1
//备注：方法二 FullScreen Javascript API 目前仍是草案，实现这个 API，更确切来说是具有这项功能的浏览器有：Chrome 15 / Firefox Nightly / Safari 5.1。
function fullScreen() {
var element= document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");
//IE 10及以下ActiveXObject
if (window.ActiveXObject)
{
var WsShell = new ActiveXObject('WScript.Shell')
WsShell.SendKeys('{F11}');
}
//HTML W3C 提议
else if(element.requestFullScreen) {
element.requestFullScreen();
}
//IE11
else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
// Webkit (works in Safari5.1 and Chrome 15)
else if(element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
}
// Firefox (works in nightly)
else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}
function fullScreenCall() {
var el= document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");
//切换全屏
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") {
// for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
function fullExit(){
var element= document.documentElement;//若要全屏页面中div，var element= document.getElementById("divID");
//IE ActiveXObject
if (window.ActiveXObject)
{
var WsShell = new ActiveXObject('WScript.Shell')
WsShell.SendKeys('{F11}');
}
//HTML5 W3C 提议
else if(element.requestFullScreen) {
document.exitFullscreen();
}
//IE 11
else if(element.msRequestFullscreen) {
document.msExitFullscreen();
}
// Webkit (works in Safari5.1 and Chrome 15)
else if(element.webkitRequestFullScreen ) {
document.webkitCancelFullScreen();
}
// Firefox (works in nightly)
else if(element.mozRequestFullScreen) {
document.mozCancelFullScreen();
}
}
function fullExitCall(){
var cfs = document.exitFullscreen || document.webkitCancelFullScreen || document.msExitFullscreen || document.mozCancelFullScreen;
if (typeof cfs != "undefined" && cfs) {
cfs.call(document);
} else if (typeof window.ActiveXObject != "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
</head>
<body>
<button id="btnFullScreen" onclick="fullScreen()">
全屏</button>
<button id="btnfullExit" onclick="fullExit()">
退出全屏</button>
</body>
</html>
网友评论