前言
上一篇文章主要介绍了我们团队的「Vue.js项目模板」的搭建过程,这只是第一步。作为新手,在实际开发过程中,难免还会遇到各种各样奇怪的问题。本文主要介绍问题的起因以及解决方式。
导航栏标题
在单页应用中,由于页面切换不会导致浏览器重新加载页面,所以页面的标题是不会改变的,这时候就要通过Javascript去修改标题。这个操作本来是非常简单的,只需要修改「document.title」即可:
document.title = 'New title';
然而,在iOS的微信和QQ中,这种方法可能无效,具体的现象就是:导航栏上的标题没有改变。这是iOS微信和QQ的bug,解决方法就是在修改「document.title」之后,用「iframe」发送一个请求(任意一个请求)。把相关的代码封装成函数:
function setTitle(title) {
document.title = title;
if (isIOS && (isInWeixin || isInQQ)) {
let iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = '/favicon.ico';
iframe.onload = () => {
setTimeout(() => {
document.body.removeChild(iframe);
}, 9);
};
document.body.appendChild(iframe);
}
}
据说新版的微信和QQ已经修复了这个bug,但为了兼容旧版本,这段代码还是必须的。