js与vue如何实现自动全屏显示效果
作者：长欢愉
这篇文章主要给大家介绍了关于js与vue如何实现自动全屏显示效果的相关资料,在vue项目中做一个可以控制页面全屏展示的效果,文中通过代码介绍的非常详细,需要的朋友可以参考下
项目场景：
在进入大屏页面时，页面自动全屏展示
问题描述
如果只是单纯的想要全屏效果，可使用如下代码：
function fullscreenCheck() {
if (!document.fullscreenElement &&
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { // current working methods
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);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
遇到的问题：
如果直接运行这个函数，会报错，报错原因大概为 浏览器全屏API只能由用户手势触发；
而直接运行这个函数，相当于通过代码模拟点击事件，仍然是 不可以 的，报错和第一种情况一样；如下：
TypeError: fullscreen error或Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture
曾尝试通过控制键盘 F11 事件去让页面全屏，但同样也是不可以的；
原因分析：
全屏 API 允许网页以全屏的方式显示在用户的屏幕上，覆盖了操作系统和其他应用程序的界面。这样的能力可能会被恶意的网站或应用程序滥用，对用户造成困扰，并带来潜在的安全风险。为了避免这种滥用和保护用户的隐私，现代浏览器对全屏 API 进行了限制，并要求 必须 由用户手势触发。
解决方案：
- 方法1：
本人使用的方法：晓之以理，动之以情；告知产品经理需求暂不可行，要求其更改产品需求。
最后将需求更改为：
用户点击屏幕任何地方即可全屏或退出全屏，这样将本文 上方全屏代码 更改为点击事件，绑定到根元素上面即可问题：
1、这样需要大屏的点击事件全部阻止冒泡
2、使用最多的echarts图表阻止冒泡方法，代码如下：
// echarts渲染
myChart.setOption(optionCarRide.value, true);
// echarts阻止冒泡
document.getElementById('XXXXXX——Id').addEventListener('click',event => {
event.stopPropagation();
})
- 方法2：如果你的大屏是在同一个页面切换显示，或是点击一个按钮，大屏是打开新的页面后显示的。请注意
将你的全屏事件绑定在这个 “跳转” 按钮上面，并设置延时。这样在打开新的页面时，浏览器会认为是用户操作了全屏事件，依旧可以完成相对应的 伪全屏事件。可以满足此类需求。
总结
到此这篇关于js与vue如何实现自动全屏显示效果的文章就介绍到这了,更多相关js vue自动全屏显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！