likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 72

项目介绍

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

错误的处理方式

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

  1. 首先是想到传的地址里面会有全屏的标识，就在进入页面时就调用全屏的方法 fullScreenClick()
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时间触发模拟用户操作

     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

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

  1. 使用全屏的插件fullscreen和vueuse的useFullscreen

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

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

  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()兼容PC和Android 端浏览器

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()基本就实现了任务需求。

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

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

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

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

转载自:https://juejin.cn/post/7287480172424282164
评论
请登录