Question

好的，这个很奇怪，我不完全确定如何在这个特定问题上标题。我有一个javascript函数，应该在文档准备好时发生。该函数的第一部分调用一个函数，该函数在页面中包含一些添加的html页面。

下一部分与当前网址页面的最后一部分匹配，并在菜单中找到它们，以便为其提供一个选定的类以及菜单项的父级。

代码可以使用，但只能使用

    alert(lastpath);

删除警告声明后，下面的行不再起作用。

    $( document ).ready(function() {

        w3IncludeHTML();
        lastpath=(window.location.pathname).split("/").slice(-1).pop();
        alert(lastpath);
        $('a[href$="'+lastpath+'"]').attr("class","selected");
        $('a[href$="'+lastpath+'"]').parent(".dropdown-content").prev().attr("class","selected");

    });

有谁知道这里会发生什么？

Answer 1

您使用the JS library from w3schools中的功能。只需看看他们的代码：

function w3IncludeHTML() {
  var z, i, a, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    if (z[i].getAttribute("w3-include-html")) {
      a = z[i].cloneNode(false);
      file = z[i].getAttribute("w3-include-html");
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          a.removeAttribute("w3-include-html");
          a.innerHTML = xhttp.responseText;
          z[i].parentNode.replaceChild(a, z[i]);
          w3IncludeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
}

它正在使用XMLHttpRequest对象，所以我们确定它是异步代码。最有可能的是，在调用此函数之后，您将使用依赖于ajax请求成功的代码行。当然，这并不好（将异步代码视为同步代码），但alert函数提供的延迟使其工作（有时;）！）。

解决方案：确保w3IncludeHTML函数执行什么操作以及如何在调用后删除同步代码。或者：尝试找到一种方法来检测此函数的ajax部分何时完成。实际上，它就在那里：

        if (xhttp.readyState == 4 && xhttp.status == 200) {
          a.removeAttribute("w3-include-html");
          a.innerHTML = xhttp.responseText;
          z[i].parentNode.replaceChild(a, z[i]);
          w3IncludeHTML();
        }

Answer 2

w3Data library中定义的函数w3IncludeHTML异步加载内容。它无法在完成工作后收到通知：

function w3IncludeHTML() {
  var z, i, a, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    if (z[i].getAttribute("w3-include-html")) {
      a = z[i].cloneNode(false);
      file = z[i].getAttribute("w3-include-html");
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          a.removeAttribute("w3-include-html");
          a.innerHTML = xhttp.responseText;
          z[i].parentNode.replaceChild(a, z[i]);
          w3IncludeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
}

快速解决方案是更改上述功能，并将以下代码添加到您的脚本中：

function w3IncludeHTML(callback) {
  var z, i, file, xhttp;
  z = document.querySelector("[w3-include-html]");
  if (!z) {
    // notify caller that all is loaded
    if (callback) callback();
    return;
  }
  file = z.getAttribute("w3-include-html");
  z.removeAttribute("w3-include-html");
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4) {
      if (xhttp.status == 200) {
        z.innerHTML = xhttp.responseText;
      }
      w3IncludeHTML(callback);
    }
  }      
  xhttp.open("GET", file, true);
  xhttp.send();
}

此版本将覆盖w3Data库提供的功能，并对其进行改进。您现在可以将回调函数传递给w3IncludeHTML，您可以确保所有内容都已加载（除非当然发生错误）：

$( document ).ready(function() {
    w3IncludeHTML(function () {
      // Everything that depends on loaded content, should be done here:
      lastpath=(window.location.pathname).split("/").slice(-1).pop();
      // not needed: alert(lastpath);
      $('a[href$="'+lastpath+'"]').attr("class","selected");
      $('a[href$="'+lastpath+'"]').parent(".dropdown-content").prev().attr("class","selected");
    });
});

Javascript无法正常工作

2 个答案: