解決IOS 在VUE單頁面應用中無法設置title問題

  • 在ios下app 設置document.title = "titleName" 失效,原因是在IOS webview中網頁標題只加載一次,動態改變是無效的。
  1. 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變化,從而解決不刷新的問題

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網絡請求組件 FMDB本地數據庫組件 SD...
    陽明AGI閱讀 16,003評論 3 119
  • 總有很多要說的,可能是自己沒按照自己想的那樣去做,寫起來就顯得無力。明明做了一系列的計劃,然后卻因為偶爾的一些事打...
    安靜506閱讀 190評論 0 0
  • 你不逼自己一下都不知道自己跑的多快,這雞湯似乎對我這個過而立之年的老男孩來說不這么的感冒。但你為什么要順從每天...
    練60s的金融大叔劉浩源閱讀 121評論 0 0
  • 我是二月初來到這里的。 大四下學期實習,我跑遍了整座城的教育機構,找不到合適的工作,要么不喜歡要么工資養不活自...
    Lemon李林夕閱讀 245評論 0 0
  • 小學的時候就開始干地里的農活,每年農忙的時候是最累的時候,家是農村的朋友是深有體會的吧。跟著家長收麥子,插秧,收水...
    全永州閱讀 194評論 0 0