Web端数据大屏适配Andriod全屏显示

项目介绍

公司目前Web端的项目前端框架是vue2,项目有大屏相关的内容,所以想让Android上面通过地址自动显示Web端的大屏内容。

错误的处理方式

刚接到这个任务的时候,思考觉得只要进入这个这么可以全屏显示大屏内容就可以了,并没有考虑到是在Android显示大屏内容

  1. 首先是想到传的地址里面会有全屏的标识,就在进入页面时就调用全屏的方法 fullScreenClick()
scss 复制代码
fullScreenClick() {
	const element = this.$refs.fullScreen.$el
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
           // chromium
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
           // 火狐
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
}

但是并没有生效,报错信息:Uncaught (in promise) TypeError: Permissions check failed

  1. 给需要的全屏标签添加一个click时间触发模拟用户操作

    scss 复制代码
     mounted () {
        const element = document.getElementById('screenpage')
        document.getElementById('screenpage').addEventListener('click', () => {
          if (element.requestFullscreen) {
                element.requestFullscreen()
              } else if (element.webkitRequestFullScreen) {
                // chromium
                element.webkitRequestFullScreen()
              } else if (element.mozRequestFullScreen) {
                // 火狐
                element.mozRequestFullScreen()
              } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen()
              }
        })
        document.getElementById('screenpage').click()
      },

    Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture,同时报错:Uncaught (in promise) TypeError: Permissions check failed

  1. 使用全屏的插件fullscreenvueuseuseFullscreen

    使用过程中依然汇报上述讲的问题,也被我舍弃了。问题是任务没有被解决掉,Android也在催着进度很是着急。

以上问题只是我当时觉得AndroidPC端的浏览器打开应该是一样的,就试了很多方法并没有实现通过地址进入指定页面自动全屏显示大屏内容。但是看到公司大佬解决的方案茅塞顿开,自己思考的和任务需求有些偏差。

  1. 修改样式让大屏自动全屏显示

    通过ref获取DOM节点,修改样式,但是没有找到正确的DOM节点样式修改,导致修改失败。实际上修改DOM节点的样式需要在$el上修改样式。

解决方法

1.首先需要使用navigator.userAgent判断当前浏览器所处的环境

navigator.userAgent.match(/(Android);?[\s/]+([\d.]+)?/) // 是否是Android环境

2.由于Android环境自启动就全屏显示当前页面的大屏,所以通过后端返回的url处理是否需要全屏操作

url格式:http://10.20.22.220:9001?fullscreen=true&redirectTo=/data/bigscreen/bigscreendata&token=B3C427ABE7B8FA8484CE840C75E10ACA

前端需要处理的是fullscreen, token本地存储,需要判断 redirectTo 是否存在路由表里面,再进行跳转处理

3.在当前页面处理Android 全屏操作

首先method写入方法fullScreenClick()兼容PCAndroid 端浏览器

kotlin 复制代码
fullscreenClick () {
        if (this.isAndroidWebkit) {
          if (this.isFullscreen) {
            this.oldFullScreenStyle = this.$s.clone(this.$refs.fullScreen.$el.style)
            this.$refs.fullScreen.$el.style.position = 'absolute'
            this.$refs.fullScreen.$el.style.zIndex = 9999
            this.$refs.fullScreen.$el.style.top = 0
            this.$refs.fullScreen.$el.style.left = 0
            this.$refs.fullScreen.$el.style.height = '100vh'
            this.$refs.fullScreen.$el.style.width = '100vw'
	   } else {
	    this.$refs.fullScreen.$el.style.position = this.oldFullScreenStyle.position
            this.$refs.fullScreen.$el.style.zIndex = this.oldFullScreenStyle.zIndex
            this.$refs.fullScreen.$el.style.top = this.oldFullScreenStyle.top
            this.$refs.fullScreen.$el.style.left = this.oldFullScreenStyle.left
            this.$refs.fullScreen.$el.style.height = this.oldFullScreeneStyle.height
            this.$refs.fullScreen.$el.style.width = this.oldFullScreenStyle.width
	   }
	    // 手动刷新组件比例
          this.$refs.screenPage.setPageSize()
        } else {
          const element = this.$refs.fullScreen.$el
          if (element.requestFullscreen) {
            element.requestFullscreen()
          } else if (element.webkitRequestFullScreen) {
            // chromium
            element.webkitRequestFullScreen()
          } else if (element.mozRequestFullScreen) {
            // 火狐
            element.mozRequestFullScreen()
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen()
          }
        }
    },

vue2生命周期mounted是实例被挂载到 DOM 后调用,此阶段完成了模板编译并且将实例挂载到 DOM 上,所以在mounted里面调用fullScreenClick()基本就实现了任务需求。


❤️ 哪条路都不是坦途🚶‍

❤️ 去把脚下的路走成最好的路吧💃

❤️ 如果错过了落日的余晖🌇

❤️ 那就去奔赴夜晚闪耀的星空🌃

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
Liudef066 小时前
儿童趣味记忆配对游戏
css·游戏·css3
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维