解决AJAX(PJAX)下代码高亮无法渲染的问题

伏笔VPS在用的wordpress代码高亮插件是Pure Highlightjs，很笨重简约的一款高亮插件。在做本站这套正题的时候，发现1个问题

 

当页面通过AJAX的方法加载的时候，内容页的代码高亮部分没法衬着，也就是高亮插件没有加载

 

 

思索到AJAX的规律，初步断定是负责衬着的js没有执行，因而就找插件的代码看了一通，发现重要的部分

 

hljs.initHighlightingOnLoad();

 

因而就把这句加到AJAX执行后的complete事变里……发现居然不生效……好吧，持续探索

 

接着又想到可能还需要在AJAX时重新加载一下高亮所需的js文件，因而网上就找了几个动态加载js文件的函数，最终找到1个比较完美的，能设置动态加载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();

});

 

伏笔VPS擦，居然还不生效……奇了怪的，持续返归去考虑高亮插件的代码，本来是基于Pure Highlightjs这款插件是基于highlight.js项目的

 

它的高亮衬着挪用方式有 initHighlightingOnLoad 、initHighlighting 等，而之前用的 initHighlightingOnLoad 是页面加载事变，因而需要变换一下挪用方式

 

loadscript(highlight_pluginUrl,function () { 

	hljs.initHighlighting();

});

 

丢到AJAX的complete事变，完美！

 

 

 

 

原文链接：https://host.fubi.hk/foreshadowinghost/zhishiku/20181025/8353.html