钉钉嵌套H5+app，钉钉导航栏显示/隐藏 页面头部标题(title)的修改

钉钉导航栏标题是用钉钉内封装好的方法，提供的API里有修改title的方法，所以引入dingtalk-jsapi去修改。

参考路径：文档钉钉开放平台

方法：需要修改标题的页面中使用钉钉的方法就可以了

步骤：1.使用npm或cnpm安装

npm install dingtalk-jsapi --save

cnpm install dingtalk-jsapi --save

2.在main.js中引入

import * as dd from 'dingtalk-jsapi';
Vue.prototype.$dd = dd;

 3.在需要修改导航栏标题的文件中去使用

if (this.$dd.env.platform!=="notInDingTalk") {
    //进行钉钉登录操作
    this.$dd.ready(() => {
        this.$ding.biz.navigation.setTitle({
          title: "导航栏标题名", 
        })
    })
}

 在微信上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);
    }
}

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

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
}

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);
    }
}