Question

我正在玩w3.css并希望扩展模板并包含一些模板 HTML。示例如下：

<!DOCTYPE html>
<html>
  <title>BUG</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"/>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

  <div class="w3-container">

    <div id="id03">
      <div w3-repeat="customers">
    <p>Here: img = {{CustomerName}} text={{City}} country={{Country}}</p>
      </div>
    </div>


    <div w3-include-html="include.html"></div>

  </div>
  <script>
    w3IncludeHTML();

    var myObject = {"customers":[
      {"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
      {"CustomerName":"Around the Horn","City":"London","Country":"UK"},
      {"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}
      ]};

      w3DisplayData("id03", myObject);

  </script>

</body>

  </html>

并且包含的文件（include.html）是

 <div>
   <h1>I am included</h1>
   <button class="w3-btn w3-white w3-border">Button</button>
 </div>

如果我注释掉w3IncludeHTML行，该程序就像我期望的那样工作但包含此行包括扩展不正确和文件包括两次。

想法出了什么问题？

Answer 1

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");
                xhttp = new XMLHttpRequest();

                xhttp.onreadystatechange = function() {

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

在XMLHTTPRequest（XHR）获得成功响应之前，我们的元素<div w3-include-html="include.html"></div>位于i位置。由于XHR请求是异步的，因此在onreadystatechange回调之前执行w3DisplayData("id03", myObject)。

w3DisplayData操纵DOM，因此我们的位置被另一个DOM元素占用。

收到Successsfull XHR后，已再次使用i来引用元素<div w3-include-html="include.html"></div>。由于DOM操作，i位置被其他元素占用，因此include.html的内容成为<div id="id03">

的子项

<div w3-include-html="include.html"></div>的重复插入是因为在onreadystatechange回调中调用了w3IncludeHTML()。

可以通过替换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");
                  xhttp = new XMLHttpRequest();
                  nodeToReplace = z[i]
                  xhttp.onreadystatechange = function() {
                      if (this.readyState == 4 && this.status == 200) {
                           a.removeAttribute("w3-include-html");
                           a.innerHTML = this.responseText;
                           nodeToReplace.parentNode.replaceChild(a, nodeToReplace);
                           w3IncludeHTML();
                     }
                 }
                 xhttp.open("GET", file, true);
                 xhttp.send();
                 return;
           }
     }
  }

模板扩展和HTML包含中的奇怪行为

1 个答案: