問題:
最近在做一個微信中分享的宣傳頁,分不同的場景,切換不同的場景時需要設置不同的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>
