- 在ios下app 設置document.title = "titleName" 失效，原因是在IOS webview中網頁標題只加載一次，動態改變是無效的。
-
vue中npm install vue-wechat-title組件
(1) 在路由配置中添加 meta對象 如：
image.png
(2) 路由尾部添加Vue.use(require('vue-wechat-title')); //實例化參數
(3) 所需要動態更改title的組件中頂部加入<div v-wechat-title="title"></div>，這里的title是你的動態標題變量
此時，安卓已經沒有問題了，但是iosHIA是不行，那么接下來
(4) 在路由配置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下添加一個空頁面
image.png
這樣，ios就可以獲取到動態標題了。
雪蓮的博客
自行總結：
其實就是利用瀏覽器回流機制，讓IOS瀏覽器去重新監聽title變化，從而解決不刷新的問題
