今天在项目上要实现一个全屏功能，翻了翻百度，实现的方式确有不少，经楼主再三斟酌，决定采用以下JS方式，所以跟大家分享一下。话不多说，下面直接贴出代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>desktop</title>
</head>
<body id="content">
<b onclick="fullscreen()">全屏</b>
</body>
<script type="text/javascript" charset="utf-8">
function fullscreen(){
if (document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.body.msRequestFullscreen) {
document.documentElement.body.msRequestFullscreen();
}
}
}
</script>
</html>
点击全屏进入全屏模式，再次点击全屏退出全屏模式。
这里延伸一下，iframe和frameset 怎么样实现全屏功能。
iframe
修改iframe的allowfullscreen属性等于true
如：<iframe name="qiye_doc" allowfullscreen="true"></iframe>
frameset
实现方式同上多两步操作，具体代码如下：
frameset结构如下：
<frameset id="top_frameset" rows="60px,*,0px" cols="*" frameborder="0">
<frame id="frame_top" name="frame_top" scrolling="no" noresize src="/admin/_top" border="0"/>
<frameset id="center_frameset" rows="*" cols="190px,*" border="0" >
<frame id="frame_left" name="frame_left" scrolling="no" noresize src="/admin/_left" />
<frame id="frame_center" name="frame_center" scrolling="auto" noresize src="center.html"/>
</frameset>
<frame id="frame_bottom" name="frame_bottom" scrolling="no" noresize src=""/>
</frameset>
center.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>desktop</title>
</head>
<body id="content">
<b onclick="fullscreen()">全屏</b>
</body>
<script type="text/javascript" charset="utf-8">
function fullscreen(){
//1.修改最上级frameset的cols属性
tObj = top.document.getElementById("top_frameset");
tObj.cols = "0,*";
//2.修改上级frameset的cols属性
pObj = parent.document.getElementById("center_frameset");
pObj.cols = "0,*";
//3. 展开全屏，兼容Chrome等浏览器
top.document.documentElement.webkitRequestFullScreen();
}
</script>
</html>
网友评论