JS動態更新微信瀏覽器中的title


問題:

最近在做一個微信中分享的宣傳頁,分不同的場景,切換不同的場景時需要設置不同的title,實現的方案很簡單,當用戶切換場景的時候,修改document對象的title屬性,可是在實際測試中,ios微信確不起作用。

解決思路:

首先懷疑ios微信不支持,document.title修改頭部修改,但是我們經過測試,如果頁面首次加載直接修改title屬性是可以實現的。所以這里原因有可能就是只在頁面首次加載時初始化了標題title,之后就沒有再監聽 window.title的change事件,所以我們這里只需要想辦法觸發window.title的監聽事件。

解決方案:

這里我們采用了hack來解決。當我們修改了title后,立即創建一個請求,加載一個空的iframe,從而觸發window.title的監聽。然后我們立即移除空請求,保證不會對頁面造成影響

實現代碼:

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>測試</title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        setTimeout(function(){
            setTitle('title修改了')
        }, 2000);
        

        function setTitle(title){
            document.title = title || document.title;
            var ua = navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i)=="micromessenger" && !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/i)){
                var ifr = document.createElement('iframe')
                ifr.src = "/favicon.ico";
                ifr.onload = function() {
                  setTimeout(function(){
                    ifr.remove();
                  }, 0)
                }
                document.body.appendChild(ifr);
            }
        }
    </script>
</html>

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM