让浏览器内容全屏显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn" style="width: 200px;height: 50px;">全屏显示</button>
<button id="btn2" style="width: 200px;height: 50px;">退出全屏</button>
<br>
<canvas width="500" height="500" style="background-color: antiquewhite;"></canvas>
<script>
function fun() {
let isFull = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement;
console.log(11, isFull)
if (isFull) {
console.log('此时是全屏显示');
}else {
console.log('目前不是全屏');
}
}
//全屏时候事件监听,满屏和退出满屏时触发
document.addEventListener('fullscreenchange', fun, false)
document.addEventListener("mozfullscreenchange", fun, false);
document.addEventListener("webkitfullscreenchange", fun, false);
document.addEventListener('msfullscreenchange',fun,false)//添加监听无效
//IE浏览器的添加监听无效,使用下面的满屏
document.onmsfullscreenchange = function(){
console.log('fullscreen2');
let isFull = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement;
console.log(22, isFull)
}
//document.onmsfullscreenchange = fun;
//全屏显示按钮
var btn=document.getElementById('btn')
btn.onclick=function(){
// var element = document.body
// 使用document.body进行满屏操作, 在全屏模式下的默认样式。参考 whatwg 标准的文档[https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults]。全屏后如果页面黑色,需要修改默认样式 ::backdrop 伪元素和 :fullscreen 伪类
var element = document.documentElement
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
//退出全屏
var btn2=document.getElementById('btn2')
btn2.onclick=function(){
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
</script>
</body>
</html>
方法封装
/**
* 浏览器是否全屏切换函数
*/
export const fullscreenToggel = () => {
if (fullscreenEnable()) {
exitFullScreen();
} else {
reqFullScreen();
}
};
/**
* 浏览器判断当前页面是否全屏
*/
export const fullscreenEnable = () => {
var isFullscreen = document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
return isFullscreen;
}
/**
* 浏览器全屏
*/
export const reqFullScreen = () => {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
}
};
/**
* 浏览器退出全屏
*/
export const exitFullScreen = () => {
if (document.documentElement.requestFullScreen) {
document.exitFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.webkitCancelFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.mozCancelFullScreen();
}
};
/**
* esc监听全屏
*/
export const listenfullscreen = (callback) => {
function listen() {
callback()
}
document.addEventListener("fullscreenchange", function () {
listen();
});
document.addEventListener("mozfullscreenchange", function () {
listen();
});
document.addEventListener("webkitfullscreenchange", function () {
listen();
});
document.addEventListener("msfullscreenchange", function () {
listen();
});
};
今天的文章浏览器全屏显示设置方法分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：http://bianchenghao.cn/11815.html
