vue使用mathJax动态加载公式进行解析
判断dom中是否已经加载了mathJax.js文件,如果没有加载就把js文件追加到body中,js文件放到cdn加速中(不要更改目录结构,把整个解压后的文件夹一起放到cdn中)
let thisBody=document.getElementByTagName('body')[0] ,
scripts=document.getElementByTagName('script'),'
oldScript;
for(let i=0;i<scripts.length;i++){
oldScrip=scripts[i].hasAttribute('src')?scripts[i].getAttribute('src').indexOf('MathJax.js?config=')!=-1?script[i]:null:null;
if(oldScript){
break;
}
}
if(oldScript){
//js已加载
MathJax.Hub.Queue(["Typeset", MathJax.Hub]); //在math容器里重载MathJax
//当数据是懒加载获取时,比如左右滑动展示获取数据,滑动到当前页面,初次获取数据解析公式的时候,Queue这个方法可能就不适用了,该方法要慎用,使用这两个方法最好添加一个判断,什么使用使用Queue,什么时候使用Update,根据实际情况而定
//MathJax.Hub.Update(["Typeset", MathJax.Hub])
}else{
let latexStyle=document.createElement('style'),
latexScript=document.createElement('script');
intLatex=latexScript.cloneNode(false);
let protocol=localhost.protocol;
let host=localhost.host;
let port=localhost.port;
//port端口视情况稳定,如果使用的是vue-cli,就不需要添加port,如果是手动配置的,添加port,我是配置在自己的服务器上,根据开发环境自动切换,也可固定一个baseUrl
//let baseUrl=protocol+'//'+host+":"+port;
let baseUrl=protocol+'//'+host;
latexScript.setAttribute('src',baseUrl+"/MathJax-master/MathJax.js?config=TeX-MML-AM_CHTML");
intLatex.setAttribute('type',"text/x-mathjax-config");
intLatex.innterHTML="MathJax.Hub.Config({messageStyle: 'none',showMathMenu: false,tex2jax: {inlineMath: [['$','$']]}});";
latexStyle.innerHTML = ".MathJax_CHTML{margin-top:5px;font-family: Arial, Chandara;margin-right:2px;}.MathJax{font-family: Arial, Chandara;}.MathJax span{line-height: normal !important;}";
thisBody.appendChild(latexScript);
thisBody.appendChild(intLatex);
thisBody.appendChild(latexStyle);
}