單頁應用在iOS微信瀏覽器中如何優(yōu)雅的設置title

Scliang 發(fā)布于2019-08-22 10:34 / 2852人閱讀

摘要：最近用做了個微信應用，遇到了一個比較尷尬的問題。用設置，在返回時不會再重新設置。由于的微信瀏覽器使用原生的在路由返回后不能及時捕獲的修改。封裝設置的方法動態(tài)引入組件并設置統(tǒng)一管理切換城市在路由鉤子中設置首頁搞定收工。

最近用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;

動態(tài)引入組件并設置meta,統(tǒng)一管理

{ 
  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 || "首頁");
});

搞定收工。

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

GPU云服務器云服務器在深度學習中的應用在php中按鈕的設置機器學習在企業(yè)中的應用云主機在我們工作中的應用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/90855.html

相關(guān)文章

在單頁應用中，如何優(yōu)雅的監(jiān)聽url的變化

摘要：單頁應用的原理從早起的根據(jù)的變化，到根據(jù)的的變化，實現(xiàn)無刷新條件下的頁面重新渲染。那么在單頁應用中是如何監(jiān)聽的變化呢，本文將總結(jié)一下，如何在單頁頁面中優(yōu)雅的監(jiān)聽的變化。在下幾章中，重點介紹一下如何監(jiān)聽的改變。 ??單頁應用的原理從早起的根據(jù)url的hash變化，到根據(jù)H5的history的變化，實現(xiàn)無刷新條件下的頁面重新渲染。那么在單頁應用中是如何監(jiān)聽url的變化呢，本文將總結(jié)一下，...

leap_frog 2019-08-30 15:55 評論0 收藏0
在單頁應用中，如何優(yōu)雅的監(jiān)聽url的變化

摘要：單頁應用的原理從早起的根據(jù)的變化，到根據(jù)的的變化，實現(xiàn)無刷新條件下的頁面重新渲染。那么在單頁應用中是如何監(jiān)聽的變化呢，本文將總結(jié)一下，如何在單頁頁面中優(yōu)雅的監(jiān)聽的變化。在下幾章中，重點介紹一下如何監(jiān)聽的改變。 ??單頁應用的原理從早起的根據(jù)url的hash變化，到根據(jù)H5的history的變化，實現(xiàn)無刷新條件下的頁面重新渲染。那么在單頁應用中是如何監(jiān)聽url的變化呢，本文將總結(jié)一下，...

姘存按 2019-08-02 14:00 評論0 收藏0
在單頁應用中，如何優(yōu)雅的監(jiān)聽url的變化

摘要：單頁應用的原理從早起的根據(jù)的變化，到根據(jù)的的變化，實現(xiàn)無刷新條件下的頁面重新渲染。那么在單頁應用中是如何監(jiān)聽的變化呢，本文將總結(jié)一下，如何在單頁頁面中優(yōu)雅的監(jiān)聽的變化。在下幾章中，重點介紹一下如何監(jiān)聽的改變。 ??單頁應用的原理從早起的根據(jù)url的hash變化，到根據(jù)H5的history的變化，實現(xiàn)無刷新條件下的頁面重新渲染。那么在單頁應用中是如何監(jiān)聽url的變化呢，本文將總結(jié)一下，...

zhkai 2019-08-23 14:23 評論0 收藏0
jssdk 在history模式下安卓不能調(diào)用圖片上傳接口和分享接口

摘要：配置先上配置每個頁面都調(diào)用微信授權(quán)配置注是我在暴露的接口這份配置主要是根據(jù)微信公眾號開發(fā)踩坑記錄配置而來。首先說明，應用環(huán)境是使用的是vue+vue-router,history模式開發(fā)的單頁應用。配置先上配置??? // index.js const protocol = location.protocol + // + location.host; router.afterE...

dkzwm 2019-08-22 15:37 評論0 收藏0
單頁應用SPA開發(fā)最佳實踐

摘要：最近用做了個單頁應用的項目，頁面大概有個左右。詳見鏈接使用自定義事件的表單輸入組件優(yōu)雅解決的問題的問題由來已久，在單頁應用中我們免不了需要處理這樣的。最近用vue+vue-router做了個單頁應用的項目，頁面大概有15個左右。積累了一些開發(fā)經(jīng)驗在此做一些記錄.本文主要從可維護性方面來考慮SPA的開發(fā)實踐全站的顏色定義放在一個less或者scss的文件里，其他組件和頁面import...

mingzhong 2019-08-01 17:35 評論0 收藏0