微信、釘釘、瀏覽器上H5頁面頭部標題(title)的修改,不刷新問題

微信

問題分析：
主要是因為微信在首次加載頁面初始化title后，就再也不監聽 document.title的change事件。 解決思路： 給頁面加上一個內容為空的iframe，隨后立即刪除這個iframe，這時候會刷新title。 代碼： export const ChangePageTitle = (title) => { var $body = $('body'); document.title = title; var $iframe = $('<iframe style="display: none"></iframe>'); $iframe.on('load', function() { setTimeout(function() { $iframe.off('load').remove(); }, 0); }).appendTo($body); } } 

釘釘

dd.ready(function() { dd.biz.navigation.setTitle({ title : val,//控制標題文本，空字符串表示顯示默認文本 onSuccess : function(result) {}, onFail : function(err) {} }); }); 

普通瀏覽器

  document.title = title; 

兼容微信、釘釘和瀏覽器的萬能修改title方法

//判斷當前頁面是在釘釘、微信還是瀏覽器中打開 export const userAgentObj = () => { const ua = navigator.userAgent.toLowerCase() let isWeiXin = false, isDingTalk = false, isApp = false, obj = {} if(ua.match(/DingTalk/i)=="dingtalk"){//用釘釘打開 isDingTalk = true }else if(ua.match(/MicroMessenger/i)=="micromessenger"){//用微信打開 isWeiXin = true }else{//用其他瀏覽器打開 isApp = true } obj.isWeiXin = isWeiXin obj.isDingTalk = isDingTalk obj.isApp = isApp localStorage.setItem("userAgentObj",JSON.stringify(obj)) return obj } //修改頭部標題的函數-----兼容微信、釘釘和瀏覽器 export const ChangePageTitle = (title) => { let userAgentObj = JSON.parse(localStorage.getItem('userAgentObj'))||null if(userAgentObj&&userAgentObj.isDingTalk){//釘釘內 window.$dd.ready(function() { window.$dd.biz.navigation.setTitle({ title : title,//控制標題文本，空字符串表示顯示默認文本 onSuccess : function(result) { }, onFail : function(err) {} }); }); }else{//微信或瀏覽器內 var $body = $('body'); document.title = title;//普通瀏覽器用這一句就可以修改了 var $iframe = $('<iframe style="display: none"></iframe>'); $iframe.on('load', function() { setTimeout(function() { $iframe.off('load').remove(); }, 0); }).appendTo($body); } } //調用函數 ChangePageTitle("我的")