起因:
最近在对接一个第三方的APP,在测试环境中,H5嵌入客户端的页面的title均可以正常展示。
但是,发布到线上的时候,发现title都消失了。
由于第三方APP沟通起来确实不是特别方便,这边H5尝试了多种方式;
终于,从测试大大那边传来了一个好消息,都可以正常展示了。
解决方法:
具体解决方法是,将一段代码嵌入到router.js中,如下:
router.beforeEach((to, from, next) => {
setTimeout(() => {
document.title = to.meta.title
document.head.querySelector('title').innerText = to.meta.title
const iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.onload = function () {
setTimeout(() => {
document.documentElement.removeChild(iframe)
}, 0)
}
document.documentElement.appendChild(iframe)
}, 20)
})
执行上面的方法,则可以完美解决了,在H5客户端出现title不展示的问题了。