Question

我的代码没有显示在我的网页上。我把一些常见的html放到一个单独的html文件（footer.html）中，并在我网站的每个页面中调用它。

这是头部。

<script src="w3.js"></script>

这是身体的一部分。

    <div w3-include-html="footer.html"></div>
    <script>
        w3.includeHTML();
    </script>

以下是footer.html的内容

<div id="footer";>
    <p>Copyright 2017<span style="float:right;">
    <script>
        var x = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
        document.write(x);
        document.write(" last updated ");
        document.write(document.lastModified.substring(0,10));
    </script>
    </span></p>
</div>

document.write不能正常工作。

这是我已经尝试过的。移动和移出包含的html并放入主html。

我已经尝试用window.write替换document.write（根据以前的帖子。

两种解决方案都不起作用。但是，当我将页脚代码复制到我的主html中时，它就可以了。这似乎是唯一的方法，但这样做会失败我的目的，因为我想在页面和页脚之间保留一些常见的代码。

（我从www.w3schools.com上获取了w3.js）

谢谢

Answer 1

包的工作方式是将innerHTML设置为新的HTML作为字符串。这不会导致JS触发。不幸的是，你无法使用该软件包。另一方面，JQuery将使用不同的架构来完成您想要做的事情。

这就是来自https://www.w3schools.com/lib/w3.js的includeHTML的工作原理

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

Jquery（https://jquery.com/）更准确地追踪它正在做什么，但你可以这样做：

如果有效，请告诉我。我没有真正测试过它。

目：

<script src="jquery.min.js"></script>

体：

<div jq-include-html="footer.html"></div>
<script>
    (function () {
        var includes = $('[jq-include-html]');
        includes.each(function () {
            elem = $(this);
            url = elem.attr('jq-include-html');
            $.ajax({
                dataType: 'text',
                url: url,
                success: function (res) {
                    elem.append(res);
                }
                error: function (err) {
                    console.error(err);
                }
            });
        });
    }());
</script>

无法运行html文件中包含的javascript

1 个答案: