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

前言：

本方法主要是针对微信、钉钉、手机上浏览器上的H5页面，用于修改其头部的标题。

1.微信内

问题分析：
主要是因为微信在首次加载页面初始化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);
    }
}

2.钉钉内

问题分析：
	具体原因可能是和微信类似的，我也没有细细的去研究，但是它又不同于微信，因为用微信的方法解决不了这个问题
解决思路：
	发现钉钉提供的API里有修改title的方法，所以果断引入dingtalk-jsapi去修改，如何引入dingtalk-jsapi[请参考](https://open-doc.dingtalk.com/microapp/dev/welcome-to-lark)
	注意：本文是将引入的dd挂载在windows上的，所以用的是window.$dd
	
代码：
export const ChangePageTitle = (title) => {
        window.$dd.ready(function() {
            window.$dd.biz.navigation.setTitle({
                title : title,//控制标题文本，空字符串表示显示默认文本
                onSuccess : function(result) {
                },
                onFail : function(err) {}
            });
        });
}

3.浏览器内

因为太常用，不必多说，直接上代码
代码：
export const ChangePageTitle = (title) => {
       document.title = title;
}

4.兼容微信、钉钉和浏览器的万能修改title方法

4.1.判断当前页面是在钉钉、微信还是浏览器中打开

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
}

4.2.修改头部标题的函数-----兼容微信、钉钉和浏览器

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("我的")