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

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

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

最近用Vue2.0 SPA做了個(gè)微信應(yīng)用，遇到了一個(gè)比較尷尬的問題。用document.title設(shè)置title，在返回時(shí)不會(huì)再重新設(shè)置title。

由于iOS的微信瀏覽器使用原生的title,在路由返回后不能及時(shí)捕獲document.title的修改。

有一種hack的解決方案：在document里append一個(gè)空的iframe做偽請(qǐng)求，在修改完標(biāo)題后進(jìn)行remove。上代碼。

封裝設(shè)置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;

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

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

在路由鉤子afterEach中設(shè)置title

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

搞定收工。

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

云服務(wù)器 GPU云服務(wù)器在深度學(xué)習(xí)中的應(yīng)用在php中按鈕的設(shè)置機(jī)器學(xué)習(xí)在企業(yè)中的應(yīng)用云主機(jī)在我們工作中的應(yīng)用

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90855.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

mingzhong 2019-08-01 17:35 評(píng)論0 收藏0