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

Scliang 發布于2019-08-22 10:34 / 2863人閱讀

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

最近用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 || "首頁");
});

搞定收工。

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90855.html

在單頁應用中，如何優雅的監聽url的變化

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

leap_frog 2019-08-30 15:55 評論0 收藏0
在單頁應用中，如何優雅的監聽url的變化

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

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

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

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

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

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

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

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