解决AJAX(PJAX)下代码高亮无法渲染的问题
我在用的wordpress代码高亮插件是Pure Highlightjs,很轻便简洁的一款高亮插件。在做本站这套主题的时候,发现一个问题
当页面通过AJAX的方式加载的时候,内容页的代码高亮部分无法渲染,也就是高亮插件没有加载
考虑到AJAX的原理,初步判断是负责渲染的js没有执行,于是就找插件的代码看了一通,发现关键的部分
hljs.initHighlightingOnLoad();
于是就把这句加到AJAX执行后的complete事件里……发现居然不生效……好吧,继续摸索
接着又想到可能还需要在AJAX时重新加载一下高亮所需的js文件,于是网上就找了几个动态加载js文件的函数,最终找到一个比较完美的,可以设置动态加载js文件完成后的事件
//loadJS
function loadscript(url, callback){
var script = document.createElement ("script")
script.type = "text/javascript";
if (script.readyState){
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
使用:
loadscript(highlight_pluginUrl,function () {
hljs.initHighlightingOnLoad();
});
我擦,居然还不生效……奇了怪的,继续返回去研究高亮插件的代码,原来是基于Pure Highlightjs这款插件是基于highlight.js项目的
它的高亮渲染调用方法有 initHighlightingOnLoad 、initHighlighting 等,而之前用的 initHighlightingOnLoad 是页面加载事件,所以需要更换一下调用方法
loadscript(highlight_pluginUrl,function () {
hljs.initHighlighting();
});
丢到AJAX的complete事件,完美!
一条评论