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

最新推荐文章于 2023-07-05 15:04:14 发布

小扶苏

最新推荐文章于 2023-07-05 15:04:14 发布

阅读量769

点赞数

CC 4.0 BY-SA版权

文章标签： ios 前端 vue

本文链接：https://blog.csdn.net/be_strong_web/article/details/130885534

当Vue编写的H5页面在App内通过新开webview跳转搜索页时，输入内容无法显示在input框。通过分析，可能是新开窗口导致js包丢失。采用创建中转页面并利用$router.replace延迟跳转的方法成功修复问题，中转页面在300ms后替换目标路径，且不增加history记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

如果是用$router.push 跳转，input输入正常
如果是调用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")
  }
]