此前,顺着科学使用 Disuqs 的思路,鄙人利用 Disqus API 实现了基本的访客留言功能,虽不完美,但也够用。后来,还是想在网络条件允许的情况下加载 Disqus 原生评论框,网络条件不佳的情况下加载自制评论框。
存在问题
利用 Disqus API 实现的评论框,所谓的不完美主要有以下:
- Disqus 原生评论框已不为访客用户调用 Gravatar 头像
- 尚未实现发送访客自己 IP 给 Disqus
- 未实现推荐、点赞等功能
第一点,Disqus 评论框以前根据访客用的邮箱信息调用 Gravatar 头像,但在某次更新之后,就没有再调用 Gravatar 头像。若博客评论都采用 Disqus 访客留言的 API,那么在 Disqus 原生评论框上显示就是默认头像,虽可指定,但强迫症你懂的。
第二点,IP 信息 Disqus API 有提供参数,发送请求却返回权限不足,同理还有位置信息等数据。是的,这个并不是重点,所以我也没有花再多时间去研究。
第三点,因所有访客用户的 HTTP Headers 及 IP 信息都一样,故推荐、点赞等功能无法实现。若能实现第二点,才有可能实现推荐、点赞等功能。
若直接在网页中使用 AJAX 去请求 Disqus API,应该能实现二、三点所提及的功能。但这样就得翻墙,倒不如直接加载 Disqus 原生评论框。
屏蔽现状
我们总说 Disqus 被墙,那么 Disqus 被墙的域名是什么?目前,Disqus 三个域名目前在国内的情况大致如下:
域名 | 说明 | 使用 |
---|---|---|
disqus.com | Disqus 主域名,国内大多数网络无法访问 | 网站、API 等 |
disquscdn.com | Disqus 静态资源 CDN,国内大多数网络可以访问 | 头像、图片 |
disq.us | Disqus 出站链接,国内大多数网络可以访问 | 跳转链接 |
从上表可以看出,最为主要还是主域名 disqus.com
,想要实现检测网络是否能够访问 Disqus,干脆就直接检测能否连接 disqus.com
。
实现流程
能想到的方法就是在网页中通过 AJAX GET 请求 disqus.com
一个小文件,若能成功返回,则加载 Disqus 原生评论框;若返回失败,则加载自制评论框。
其大致流程如下:
st=>start: 开始
e=>end: 结束
op1=>operation: 请求
cond1=>condition: 响应
op2=>operation: Disqus 评论框
op3=>operation: 自制评论框
st->op1(right)->cond1
cond1(yes)->op2->e
cond1(no)->op3->e
具体代码
我发现 Disqus 评论框加载的时候,都会请求一个小文件:
https://disqus.com/next/config.json
经测试,这个文件不存在跨域的权限问题,在自己网站上亦可发送异步请求。
在这里,直接使用XMLHttpRequest 这个 API 来发送请求便可,具体应用起来需要考虑的就没有上面流程图那么简单任性,必须配合 XMLHttpRequest 的具体事件来做一些适配,以下是一个简单的例子:
var xhr = new XMLHttpRequest();
xhr.open('GET', '//disqus.com/next/config.json?' + new Date().getTime(), true);
xhr.timeout = 3000;
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// 加载 Disqus 评论框
}
}
xhr.ontimeout = function () {
xhr.abort();
// 加载自制评论框
}
xhr.onerror = function() {
// 加载自制评论框
}
xhr.send(null);
采用超时的方法来判断是否能连接上 Disqus,是因为我想 3 秒内无法成功 GET
这个小文件,就算翻了墙,评论框的加载速度也不容乐观。
更加合理
加载 Disqus 评论框最初就是需要加载一个 js 文件,何不在根据它的状态来判断呢?onload
便是能加载,这不就能省去一步了吗?搞起:
var disqus_onload = false;
var disqus = document.createElement('script');
disqus.src = '//shortname.disqus.com/embed.js';
disqus.setAttribute('data-timestamp', +new Date());
disqus.onload = function(){
disqus_onload = true;
}
disqus.onerror = function(){
disqus_onload = false;
}
document.head.appendChild(disqus);
setTimeout(function(){
if ( !disqus_onload ){
disqus_onload = true;
// 加载自制评论框,隐藏掉 Disqus 原生评论框的 div
}
}, 3000);
Disqus JS 文件三秒内没有 onload
,则加载自制评论框。这里有一个 bug,有可能只是网速慢点,Disqus 评论框会继续加载,所以加载自制评论框的同时可以隐藏掉原生评论框。
事实上,若灵活利用 Disqus 相关的回调函数,或许能带来更好的体验。比如说 onReady
时,给个可以切换的提示。
这些天感觉就算翻了墙,有时候访问 Disqus 还是挺慢的。我想了另一种方案,就是无论如何,同时加载两种评论框,Disqus 评论框做隐藏,监听 Disqus 的事件,当某个事件发生时切换至 Disqus 评论框。
st=>start: 开始
e=>end: 结束
op1=>operation: 加载两种评论框
cond1=>condition: Disqus 加载失败
op2=>operation: 某事件切换到 Disqus 评论框
st->op1(right)->cond1
cond1(no,right)->op2->e
cond1(yes)->e
流程图看起来是否简单了很多?有时间我会把这些想法打成包。
后来,我发现如果打开页面就请求加载 Disqus 的 JS 文件,若无法访问,会导致菊花一直转,转一段时间后才会停止,这样对用户来说是不好的。所以我还是觉得第一种方法比较好,后面也把想法打包实现了三种加载方案。
本文历史
- 2017 年 05 月 07 日 完成初稿
- 2017 年 05 月 11 日 完善
- 2017 年 05 月 24 日 另一种方案
- 2017 年 06 月 19 日 更新