Disqus + AJAX 在没有评论框页面报错的解决

最近重新添加了 AJAX 加载，目的是为了装b提高用户体验。好吧其实是解决了之前的在没有加载评论框的页面出现下列报错的问题

Uncaught TypeError: Cannot read property 'appendChild' of null

在 Disqus 加载后，脚本就会寻找<div id="disqus_thread"></div>并向其中添加内容，但是文章列表页面没有这个 div ，导致报错。

解决方案

更新：Disqus 脚本发生变动，新的脚本如下

function loadcomments() {
    if ($('#disqus_thread').length > 0) {
        if(typeof DISQUS !== 'object') {
            (function() {
                var d = document, s = d.createElement('script');
                s.src = '//你的disqus短名称.disqus.com/embed.js';
                s.setAttribute('data-timestamp', +new Date());
                (d.head || d.body).appendChild(s);
            })();
        } else {
            DISQUS.reset({reload: true});
        }
    }
}

对应的需要在评论区添加的脚本为

var disqus_config = function () {
    this.page.url = '页面URL';
    this.page.identifier = '文章ID或其他';
};

footer 部分不再需要指定短名称了。

首先使用下面这段脚本，在页面加载时和 AJAX 加载完成后都使用loadcomments();；

function loadcomments() {
    if ($('#disqus_thread').length > 0) { //判断是否有 Disqus 的 div
        if(typeof DISQUS !== 'object') { //判断 Disqus 是否已经加载，若没有则加载
            (function() {
                var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
            })();
        } else { //若 Disqus 已经加载过，则重置，加载对应页面的评论
            DISQUS.reset({reload: true});
        }
    }
}

接下来在页面 footer 部分添加一句脚本，定义 Disqus 短名称；

var disqus_shortname = '你的DISQUS短名称';

然后，将原本的<div id="disqus_thread"></div>下面的脚本删除，改为输出能让 Disqus 识别当前页面的内容；

var disqus_identifier = '当前文章的ID或是其他独有的东西';
var disqus_url = '当前页面的URL';

文章ID和页面URL，用你的博客程序的输出就可以了。

最后，保存文件，刷新试试效果吧~