今天接到一个需求要求全屏显示内容,我现在实现的是浏览器全屏显示内容。
1. 首先去layui拿2个图标,全屏和取消全屏的图标代码引用
CSS代码
.admin-side-full {
position: absolute;
cursor: pointer;
z-index: 19940201;
left: 28px;
color: white;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
top: 25%;
}
<li class="admin-side-full">
<i class="layui-icon layui-icon-screen-full" style="color: #eeeeee;" onclick="showFullScreen()" id="fullScreen"></i>
<i class="layui-icon layui-icon-screen-restore" style=" color: #eeeeee;" onclick="closeFullScreen()" id="notFullScreen"></i>
</li>
2. 编写全屏、取消全屏以及监听全屏代码
<script type="text/javascript">
// 全屏显示
function showFullScreen(){
if (!document.fullscreenElement &&!document.mozFullScreenElement
&& !document.webkitFullscreenElement &&!document.msFullscreenElement) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
}
// 取消全屏
function closeFullScreen(){
if (document.fullscreenElement != null) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
//全屏判断
function isFullscreen(){
return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
}
//监听退出全屏事件
window.onresize = function() {
if (!isFullscreen()) {
$('#fullScreen').show();
$('#notFullScreen').hide();
} else {
$('#fullScreen').hide();
$('#notFullScreen').show();
}
}
</script>
以上就是全屏、取消全屏功能实现
全屏:
取消全屏: