几个月之前发现这个基于typecho的blog在动态更改标题方面有点不对劲,之前通过js引入了在页面失去焦点时动态更改标题的特效,但在dogcraft.top这个站点上有时候不对劲,其他的站点都是正常的。
不对劲的表现是失去焦点后在切换回来之后标题没有改成原来的标题,而是成了首页的标题。这个问题让我十分费解,一开始是认为是浏览器的bug,后来发现在其他站点都没有问题。后来有怀疑是这个js和原有的主题自带的js里面变量名有冲突,给覆盖了,但又看了一下那个js,所有代码给包裹在一个匿名函数里面去了,而且改了变量名也没有用,这个原因也排除了。还曾经怀疑过是变量放久了变质了
今天突然发现了一个现象解开了这个谜团,在今天观测首页到了切换之后并没有变成首页的标题,而是变成了最开始打开的那一个文章的标题,这个首页是从文章那里点击上方导航栏里过去的。经过几次重复之后确认了这个现象,而且在重复过程之中顶上的导航栏没有消失,这个时候就想到了这个主题是带有pjax
的,跳转网页的时候会部分刷新。然后这一切都解释通了。
当打一个https://dogcraft.top/
页面会加载https://www.dogcraft.top/js/biaoti.js里面的js。里面js运行之后会获取当前页面的标题,然后存进变量里面,失去焦点之后动态改,等页面重新获得焦点之后在用这个存起来的原来的标题改回来,页面原来的标题是在这个页面加载之后马上就获取的,如果是一个普通的html文档自然就没有什么问题,然而有了这个pjax之后就不一样了,pjax部分加载网页,通过JavaScript与html的DOM来动态更改页面内容,甚至连地址栏里的url都给你换了,pjax只会更改网页变化的部分,想js等这种不变的部分不给变的,也就是在js看来页面还是刚才的页面,没有新的页面加载,自然存储在变量里的老标题还是原来的标题。
问题原因已经找到了,解决方案就很容易了,pjax也考虑到为这类问题,一般通过重载函数来解决。首先改标题的代码是在匿名函数里面,不好更改里面的变量,所以存储旧标题的变量应该改为全局变量,我这里是给安排到window
下面去了。同时设置一个重载函数,用来在pjax更改页面之后获得新页面的地址并存储到全局变量里面。最后把重载函数填到主题里面PJAX 重载函数里面。
这样问题就解决了。
下面是相关的JavaScript代码:
$(function(){
var vendorPrefix=getBrowserPrefix();
var eventName=visibilityEvent(vendorPrefix);
document.addEventListener(eventName,visibilityEventCallback);
window.dogcrafttitel=document.title; //安排上全局变量
function visibilityEventCallback(){
if(document.hidden){
//oldTitle=document.title;
setTimeout(function(){document.title="(●′ω`●)你看不见我……";},2500);
}else{
document.title="๑乛◡乛๑ 还是被发现了";
setTimeout(function(){document.title=window.dogcrafttitel;},2000);
}
}
});
//重载函数
function getrealtitle() {
window.dogcrafttital=document.title;
console.log("旧地址更新完毕。")
}
发现JavaScript越来越有意思了(雾)
在主题设置里面添加pjax重载函数之后在html里面会多出这样一段:
<script> $(document).on('pjax:complete',function(){ getrealtitle(); }) </script>