app内部嵌套的h5,document.title设置title在ios中无效

处理如下:

const agent = navigator.userAgent;
const isiOS = !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
const isAndroid = agent.indexOf('Android') > -1 || agent.indexOf('Adr') > -1; //android终端
// iOS
if (isiOS) {
  router.beforeEach((to, from, next) => {
    let title = "测试头部";
    if (to.meta.title) {
      title = to.meta.title;
    }
    let _body = document.getElementsByTagName('body')[0];
    document.title = title
    let _iframe = document.createElement('iframe')
    _iframe.style.display = 'none'
    _body .appendChild(_iframe)
    setTimeout(() => {
      document.body.removeChild(_iframe)
    }, 300)
    next();
  });
} else if (isAndroid) {
  router.beforeEach((to, from, next) => {
    let title = "测试头部";
    if (to.meta.title) {
      title = to.meta.title;
    }
    document.title = title;
    next();
  });
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在 Vue 项目修改 `document.title` 可以通过多种方式实现,而不一定要直接修改 `vue.config.js` 文件。 一种常见的方式是在组件使用 `document.title` 属性来动态修改页面标题。你可以在组件的生命周期钩子函数设置 `document.title` 的值,例如在 `mounted` 钩子函数进行设置。下面是一个示例: ```vue <template> <div> <!-- 组件内容 --> </div> </template> <script> export default { mounted() { document.title = '新的页面标题'; } }; </script> ``` 当这个组件被挂载到页面上时,`document.title` 的值会被设置为 `'新的页面标题'`。 如果你希望在整个 Vue 项目统一设置页面标题,可以使用 Vue Router 的导航守卫来实现。你可以在路由导航前(beforeEach)或路由导航后(afterEach)修改 `document.title` 的值。下面是一个使用 Vue Router 导航守卫的示例: ```javascript // main.js import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = new VueRouter({ // 路由配置 }); router.beforeEach((to, from, next) => { document.title = to.meta.title || '默认标题'; next(); }); new Vue({ router, render: h => h(App) }).$mount('#app'); ``` 在上面的示例,我们通过 `to.meta.title` 来获取每个路由配置的标题,在导航前修改 `document.title` 的值。 总结来说,你可以根据具体的需求选择在组件直接修改 `document.title`,或者使用 Vue Router 导航守卫来统一管理页面标题。修改 `vue.config.js` 文件通常用于设置全局的构建配置,而不是用于修改页面标题。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值