0%
3245 字 --- 耗时5 分钟.

腾讯404公益页面,你中招了吗

之前在别人的博客里看到了腾讯的 404 公益页面,感觉很不错,算是腾讯的良心大作啊,被腾讯坑了这么多年(腾讯到底坑了我啥了...)。

简单介绍一下这个页面,公益404页面是由腾讯公司员工志愿者自主发起的互联网公益活动。网站只需要在自己的 404 页面中嵌入一段简单的代码,就能通过互联网来迅速传播失踪儿童信息,从而提高找回失踪儿童的概率。失踪儿童信息来自宝贝回家寻子网

至于腾讯 404 页面的介绍并不是本文的主题,我想,凡是看了这个 404 页面的,都会忍不住想要把自己的 404 设置成这种格式的。

设置很简单,腾讯公益团队提供了一个函数接口,把下面的这个 script 放到 head 标签里:

<script type="text/javascript" src="http://www.qq.com/404/search_children.js"></script>  
//下面是 small 版的,说实话,我现在都还没发现这两个版本有什么区别
<script type="text/javascript" src="http://www.qq.com/404/search_children.js?edition=small" charset="utf-8"></script>  
//可能时间久了,这个 small 被取消了吧

这个放到 head 的效果如下,无论你 body 中是什么内容,都会被这个函数的内容给覆盖掉,变成这个:

示例图1

就像箭头指的那样,需要把返回腾讯网改成自己的,比如返回主页啥的,如下:

<script type="text/javascript" src="http://www.qq.com/404/search_children.js"  
 homepagename="返回渔人的主页" homepageurl="/" charset="utf-8"></script>

问题所在

把上面这段话加到我自己的 404 页面中,发现效果是实现了,但是返回主页一直都有问题,并不是如我所想的返回渔人的主页,而仍然是返回腾讯网,决定一探究竟

http://www.qq.com/404/search_children.js 这个返回的是:

第一个 url http://qzone.qq.com/gy/404/data.js,返回的是一个 json 数据,自己可以在浏览器里输入试一下,分析了一下,大概是腾讯员工从宝贝回家网整理来的信息,json 格式。第二个 url http://qzone.qq.com/gy/404/page.js 是处理函数,不是很长,先找到属性 homepagename 和 homepageurl 的位置,从第 31 行开始,50 行结束:

var homePageUrl, homePageName;  
//获取所有 <script> 标签
var scs = document.getElementsByTagName("script");  
for (var i = 0; i < scs.length; i++)  
    if (scs[i].src.indexOf("/404/search_children.js") > -1) {
        if (scs[i].getAttribute("homePageUrl")) homePageUrl = scs[i].getAttribute("homePageUrl");
        if (scs[i].getAttribute("homePageName")) homePageName = scs[i].getAttribute("homePageName");
        break
    }
//把标签成功匹配的值传给默认参数
$scope.rettext = homePageName;
$scope.retlink = homePageUrl;
//实际上函数就应该可以结束了,下面的这段话真的不懂是什么意思
if (location.href.indexOf("fm.qq.com") > -1 || location.href.indexOf("fm.qzone.qq.com") > -1) {  
    $scope.rettext = "返回企鹅FM";
    $scope.retlink = "http://fm.qq.com"
} else if (location.href.indexOf("qzone.qq.com") > -1) {
    $scope.rettext = "返回我的空间";
    $scope.retlink = "http://qzone.qq.com"
} else {
    $scope.rettext = "返回腾讯网";
    $scope.retlink = "http://www.qq.com"
}
//这样一来,rettext的值又变成 返回腾讯网 了...

实际上这两个处理逻辑可以换一下,先通过 href 判断,在查找 homePageUrl homePageName,如果有,就把值换了,这样子的逻辑才合理。否则,上面这段代码的处理结果,返回值都是一样的,就是跳到腾讯网主页,哈哈,这个锅腾讯你要背呀。

解决办法

通过研究,我发现最终替换 body 内容的是最后的那个闭包函数,所以就把闭包函数作为内联的形式添加到 404 页面的最后,并修改其中:

$scope.rettext = "返回渔人的主页";
$scope.retlink = "/"

记住,一定要把这个函数放到search_children.js后面,否则起不到覆盖的效果。

404页面已经放到 GitHub 上了,无论腾讯页面的这个 bug 是否存心,但是腾讯的这个公益页面还是很赞的,希望能一直走下去,共勉!