Question

我正在使用ajax将'mysite / math /'中的所有内容加载到math.php中。在math.php里面我想用katex渲染加载的数学内容。

在math.php中我从cdn加载库katex，可以在上面的链接中找到。

math.php的html：

<body>
  <div id='main'>
</body>

在math.php的脚本标签里面，我有一些php从'mysite / math /'获取网址列表

echo "var x = [];";
$dir = "./math/";
$a = scandir($dir);
foreach ($a as $x) {
if ($x === '.' or $x === '..') continue;
  echo "x.push('mysite/math/" . $x . "');";
}

所以这给了我一个数组x，它包含我想要加载到我的网页中的每个文件的位置。

现在，在javascript中，我对数组x中的url进行多次AJAX调用：

// defining the ajaxing function
function myfunction(url, someFunction) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      someFunction(this, url);
    }
  };
  xhr.open('GET', url, true);
  xhr.send(null);
}

// defining the callback function
function callbackfunction(xhr, url) {
  var name = url;
  var div = document.createElement('div');
  div.innerHTML = xhr.responseText;
  div.className += name;
  document.getElementById('main').appendChild(div);
}

// here, I'm actually executing the ajax calls
for (var i = 0; i < x.length; i++) {
  myfunction(x[i] + '?w=' + Math.random(), callbackfunction);
}

到目前为止，这一切都很好。

问题：

在'mysite / math /'中的每个html文件中，有一个span ='math'的span标签，其中包含我要渲染的数学内容。所以在math.php中，我看到了我的所有内容，并且我看到我的span标签有class ='math';他们都在那里。

在math.php里面还有以下javascript使用katex函数katex.render（）

var math = document.getElementsByClassName('math');
for (var i = 0; i < math.length; i++) {
  katex.render(math[i].innerHTML, math[i]);
}

如果未使用ajax加载内容，我使用katex的方式可以正常工作。

注意： 我已经多次看过这个问题，但答案总是使用jquery。我想在javascript中找到解决方案。

Answer 1

当浏览器调用katex.render时，问题很可能是您的AJAX提供的内容尚未出现在页面上。

由于您正在进行多次调用以加载内容，因此您需要等到所有调用都返回以调用katex.render。使用vanilla JavaScript可以通过以下几种方式来实现：

创建一个事件处理程序，侦听每个要完成的调用。当他们全部完成时（可能跟踪变量中完成的调用次数），调用katex.render。
将每个AJAX调用包含在一个promise中，将它们全部推送到一个数组中，然后在数组上调用Promise.all。在Promise.all().then()中，调用katex.render。

Answer 2

这个解决方案并不那么复杂，但我认为它可以胜任。

我通过添加一行applyKatex(div)

来更改了我的回调函数

// defining the callback function
function callbackfunction(xhr, url) {
  var name = url;
  var div = document.createElement('div');
  div.innerHTML = xhr.responseText;
  div.className += name;
  document.getElementById('main').appendChild(div);
  applyKatex(div); //  <---this is what i added
}

我创建了一个函数applyKatex()，它接受一个html元素并将函数katex.render()应用于每个具有类名的子元素＆＃39; math＆＃39;

当每个新div添加到页面时，katex.render()将应用于它

function applyKatex(element) {
  var math = element.getElementsByClassName('math');
  for (var i = 0; i < math.length; i++) {
    katex.render(math[i].innerHTML, math[i]);
  }
}

javascript无法处理ajax加载的内容;不使用jquery

2 个答案: