js、vue如何自动全屏显示 |
您所在的位置：网站首页 › 怎样取消手机全屏显示 › js、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：如果你的大屏是在同一个页面切换显示，或是点击一个按钮，大屏是打开新的页面后显示的。请注意 将你的全屏事件绑定在这个 “跳转” 按钮上面，并设置延时。这样在打开新的页面时，浏览器会认为是用户操作了全屏事件，依旧可以完成相对应的 伪全屏事件。可以满足此类需求。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |