<template>
<div>
<button @click="requestFullScreen">进入全屏模式</button>
</div>
</template>
<script>
export default {
methods: {
requestFullScreen() {
const element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
}
}
</script>在这段代码中，我们定义了一个按钮，当单击该按钮时将触发
requestFullScreen 方法，该方法请求进入全屏模式在该方法中，我们首先获取
document.documentElement 元素，表示整个文档然后，使用
requestFullscreen，msRequestFullscreen，mozRequestFullScreen和 webkitRequestFullscreen方法中的任意一个方法进入全屏模式，具体是取决于浏览器。这些方法中的每一个都接受一个参数，用于指定要进入全屏模式的元素
注意: 在Chrome和Safari浏览器中，你需要使用HTTPS协议才能触发全屏模式，同意的注意，除非在用户交互中触发，否则浏览器将不允许进入全屏模式。
就是说，如果你是使用vue，进入页面自动进入全屏，代码不能在 需要进入全屏页面的 created() 和 mouted() 这两个钩子函数中调用
那么在哪里调用这个方法，在你push 路径 进入 需要全屏页面进之前
比如说：有两个页面，A页 和 B页
B页面 是需要进入自动展示全屏的页面，
A页面是其他页面，A页面有个按钮，当点击按钮的时候，进入B页面，B页面自动进入全屏状态
那么，就需要在A页面调用自动进入全屏代码，进入全屏后，在跳转进入B页面，这样就完成了进入页面自动进入全屏状态。
点击退出全屏状态，代码如下：
document.webkitExitFullscreen()
- THE END -
最后修改：2023年4月28日
非特殊说明，本博所有文章均为博主原创。
如若转载，请注明出处：https://www.yun89.cn/101.html
共有 0 条评论