Question

这个问题让我非常难过。我正在尝试使用Javascript包含HTML代码段并且它有效，但由于某种原因，它决定在其他各个位置包含重复的代码段。

以下是我的意思截图：

它还会改变这些随机包含的数量和位置。

这是我用来包含的功能。它搜索文档并查找具有属性include =“x.html”

的div元素

function include() {
  var allElements;
  var fileName;
  var includeRequest;

  allElements = document.getElementsByTagName("*");
  for (var i = 0; i < allElements.length; i++) {

    if (allElements[i].getAttribute("include")) {

      fileName = allElements[i].getAttribute("include");
      includeRequest = new XMLHttpRequest();
      includeRequest.open("GET", fileName, true);

      includeRequest.onreadystatechange = function() {
        if (includeRequest.readyState == 4 && includeRequest.status == 200) {

          allElements[i].removeAttribute("include");

          allElements[i].innerHTML = includeRequest.responseText;
          include();
          delete includeRequest;
          includeRequest = null;
        }
      }     
      includeRequest.send();

      return;   
    }
  }
}

这是从包含文章的html文件中获取标签的功能，并将它们添加到右侧框中的标签列表中。如您所见，在一个位置，页脚将添加到列表而不是标记。我不知道为什么。

function getTags() {
    var taglist = document.getElementById("taglist");

    var tagsRequest = new XMLHttpRequest();

    tagsRequest.open("GET", "blogstubs.html", true);
    tagsRequest.responseType = "document";

    tagsRequest.onreadystatechange = function() {
        if (tagsRequest.readyState == 4 && tagsRequest.status == 200) {

            var tagsResponse = tagsRequest.responseXML;
            var tags = tagsResponse.getElementsByClassName("tag");
            var tags = getUnique(tags);



            var len = tags.length;


            for (var i = 0; i < len; i++) {
                var li = document.createElement("li"); 

                li.appendChild(tags[i]);

                taglist.appendChild(li);

            }
            delete tagsRequest;
            tagsRequest = null;
        }
    }      

  tagsRequest.send();

}

仅限Javascript解决方案。想法？

Answer 1

我复制了您的网站（我希望您不要介意）并根据我的更改对其进行测试，现在似乎没有这个错误。这就是我的所作所为：

1）我创建了一个新功能，不要忘记将名称更改为您喜欢的名称：

function newFunction(allElements, includeRequest) {
    allElements.removeAttribute("include");
    allElements.innerHTML = includeRequest.responseText;
    include();
    delete includeRequest;
    includeRequest = null;
}

2）我将include()函数更改为如下所示：

function include() {
    var allElements;
    var fileName;
    var includeRequest;

    allElements = document.getElementsByTagName("*");
    for (var i = 0; i < allElements.length; i++) {

        if (allElements[i].getAttribute("include")) {
            var element = allElements[i];

            fileName = element.getAttribute("include");
            includeRequest = new XMLHttpRequest();
            includeRequest.open("GET", fileName, true);

            includeRequest.onreadystatechange = function() {
                if (includeRequest.readyState == 4 && includeRequest.status == 200) {
                    return newFunction(element, includeRequest);
                }
            }     
            includeRequest.send();

            return; 
        }
    }
}

我认为问题是由AJAX请求的异步性造成的，就像我在评论中所说的那样。因此，您需要将变量传递给AJAX调用而不是使用全局范围，这就是您需要这个新回调函数的原因。

换句话说，在原始代码中，AJAX变量allElements[i]与你的循环allElements[i]不同步，所以在你的循环中它将是5，in AJAX函数（它单独执行而不是与循环一起执行）它将是3,6或其他任何东西。这就是为什么它会将html附加到似乎随机的元素。把AJAX想象成一个不关心你的循环顺序的人，一个真的不想等待别人正在计算并按照自己的顺序做所有事情的人。

Javascript HTML包含重复的结果包含在随机位置

1 个答案: