微信、钉钉、浏览器上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("我的")
 

 
 

微信、钉钉、浏览器上H5页面头部标题(title)的修改,不刷新问题

上一篇:微信支付开发(1) JS API支付


下一篇:基于第三方微信授权登录的iOS代码分析