app内嵌h5页面，iOS 无法动态修改title

最新推荐文章于 2024-05-04 03:41:57 发布

bigBax

最新推荐文章于 2024-05-04 03:41:57 发布

阅读量2.1k

点赞数

分类专栏：技术

本文链接：https://blog.csdn.net/weixin_36852235/article/details/96307926

版权

本文介绍了在iOS环境下，App内嵌H5页面时遇到的无法动态修改document.title的问题。由于在iOS的Webview中，网页标题只在初次加载时获取，后续动态修改无效。为解决此问题，推荐使用vue-wechat-title组件，在Vue项目中通过路由配置的meta对象来实现标题动态更新。

摘要由CSDN通过智能技术生成

在ios下app 设置document.title = “titleName” 失效，原因是在IOS webview中网页标题只加载一次，动态改变是无效的。

vue中 npm install vue-wechat-title 组件

在路由配置中添加 meta对象如：

 
    {
      path: commPath + 'hotProduct/cardResult',
      name: 'hotProductCardResult',
      meta: {
        title: '支付结果'
      },
      component: resolve =>
        require(['@/views/hotProduct/cardResult'], resolve)
    },
    {
      path: commPath + 'consum/consumDetail',
      name: 'consumDetail',
      meta: {
        title: '消费详情'
      },
      component: resolve =>
        require(['@/views/consum/consumDetail'], resolve)
    },

在这里插入图片描述

在static 文件下创建html文件夹新建一个空的html

在这里插入图片描述

// main.js

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)


// App.vue
 <router-view v-wechat-title="$route.meta.title"></router-view>