H5 嵌入在ios app中,input不能输入内容

场景: vue写的H5页面嵌入在app中展示,点击跳转搜索页:

  1. 如果是用$router.push 跳转,input输入正常
  2. 如果是调用app提供的新开webview窗口打开,则input输入时,可以唤起输入键盘,但是输入的文案不能在input框中展示
    原因:不清楚,猜测可能是新开窗口是有丢失js包
    解决方案:
    1. 新增一个中转空白页面,在页面中自动用**$router.replace来跳转到目标页面**,跳转的时候用来个计时器来延迟跳转,看具体情况决定是否需要
    2. 在原本需要跳转目标页面的地方,修改跳转至新增的中转页面,其他不变

结果:很好的解决了问题,replace不会产生新的history记录,不影响返回操作
下面是中转页代码

<template>
  <div>
  </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop, Ref, Vue } from "vue-property-decorator";

@Component({
  name: "redirectPage",
})
export default class redirectPage extends Vue {
  mounted() {
    let path: any = this.$route.path;
    if (path) {
      path = path.replace('/redirect', '');
      setTimeout(() => {
        this.$router.replace({
          path
        });
      }, 300);
    }
  }
}
</script>

router.js 中新增:

export default = [
  {
    path: "/redirect/*",
    name: "redirectPage",
    meta: {
      title: "中转页面"
    },
    component: () =>
      import("@/views/redirect.vue")
  }
]

你可能感兴趣的:(ios,前端,vue)