解决app内嵌h5中ios获取不到title,vue router 修改title(IOS 下动态改变title失效)
在ios下app 设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的。vue中npm install vue-wechat-title组件在路由配置中添加 meta对象 如:路由尾部添加Vue.use(require('vue-wechat-title')); //实例化参数所需要动
·
在ios下app 设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的。
vue中npm install vue-wechat-title组件
在路由配置中添加 meta对象 如:
路由尾部添加Vue.use(require('vue-wechat-title')); //实例化参数
所需要动态更改title的组件中顶部加入<div v-wechat-title="title"></div>,这里的title是你的动态标题变量
此时,安卓已经没有问题了,但是iosHIA是不行,那么接下来
在路由配置js里面添以下代码
router.afterEach(route => { // 从路由的元信息中获取 title 属性 if (route.meta.title) { document.title = route.meta.title; // 如果是 iOS 设备,则使用如下 hack 的写法实现页面标题的更新 if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) { const hackIframe = document.createElement('iframe'); hackIframe.style.display = 'none'; hackIframe.src = '/static/html/fixIosTitle.html?r=' + Math.random(); document.body.appendChild(hackIframe); setTimeout(_ => { document.body.removeChild(hackIframe) }, 300) } } });我是添加到了main.js文件里了,然后在static下添加一个空页面
这样,ios就可以获取到动态标题了。
更多推荐
已为社区贡献6条内容
所有评论(0)