單頁應用在iOS微信瀏覽器中如何優雅的設定title

啊哈丶發表於2016-08-02
iOS瀏覽器

最近用Vue2.0 SPA做了個微信應用，遇到了一個比較尷尬的問題。用document.title設定title，在返回時不會再重新設定title。

由於iOS的微信瀏覽器使用原生的title,在路由返回後不能及時捕獲document.title的修改。

有一種hack的解決方案：在document裡append一個空的iframe做偽請求，在修改完標題後進行remove。上程式碼。

封裝設定title的方法

const titleUtil = {};

titleUtil.setTitle = (title) => {
    document.title = title;
    let ua = navigator.userAgent;
    if (/MicroMessenger/([d.]+)/.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
        var i = document.createElement(`iframe`);
        i.src = `/favicon.ico`;
        i.style.display = `none`;
        i.onload = () => {
            setTimeout(() => {
                i.remove();
            }, 9);
        };
        document.body.appendChild(i);
    }
};

export default titleUtil;

動態引入元件並設定meta,統一管理

{ 
  path: `/city_select`, name: `city.select`, component:  (resolve) => {
    require([`../components/page/fund/city.select`], resolve);
  } , meta: { title: `切換城市` } 
}

在路由鉤子afterEach中設定title

router.afterEach((route) => {
  titleUtil.setTitle(route.matched[0].meta.title || `首頁`);
});

搞定收工。

如果有更好的方式希望各位不吝賜教。

相關文章