我想拥有许多一种类型的HTML页面,唯一的区别是页面标题和一些存储在不同.json文件中的数据。其他所有内容都应存储在两个集中文件中,分别是.js和.html文件。在伪代码中,页面应如下所示:

<html>
<head>
include global_script.js
include specific_data_n.json
</head>
<body>
include global_body.html
</body>
</html>


其中第n页包含数据文件specific_data_n.json,但其他所有内容始终相同。

我知道如何在标头中包含.js和.json文件。但是,我真的不知道如何在正文中包含.html文件。我在网上搜索,特别是发现了这个问题:Server side includes alternative我尝试了不同的方法将答案中提出的正文包括在内,但是无论如何,我都遇到了JS错误。

这是问题的最小示例。首先,主体在主文件中而不在其他文件中的工作文件:



    function init(){document.getElementById('demo').innerHTML = '2+2=4';}

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><head>
    <script language="javascript" type="text/javascript" src="minimal.js"></script>
    </head>
    <body onload="init();">

    <div id="demo">
    2+2=5
    </div>

    </body>
    </html>





现在,我尝试按照上面链接的问题的答案之一将正文放在外部文件中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="minimal.js"></script>
</head>

<body onload="init();">
    <!-- Content, inclusion from https://stackoverflow.com/questions/35249827/can-you-link-to-an-html-file -->
    <div w3-include-html="body_minimal.html"></div>
    <script>
(function () {
  myHTMLInclude();
  function myHTMLInclude() {
    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]);
            myHTMLInclude();
          }
        }
        xhttp.open("GET", file, true);
        xhttp.send();
        return;
      }
    }
  }
})();
</script>
</body>
</html>


以及其中包含的body_minimal.html:

<div id="demo">
2+2=5
</div>


我还尝试了其他进一步的方法来嵌入body_minimal.html文件(如果需要,可以提供该文件),但是它们都不起作用,因此我认为这是一个基本问题。我总是在JS调试器中收到错误:

TypeError: document.getElementById(...) is null


我需要补充一点,我既没有HTML经验,也没有CSS经验,主要是从不同的教程,论坛和Q&A网站复制粘贴内容,因此我并不真正理解这段嵌入HTML文件的代码在做什么。 :)

感谢您对问题可能出在哪里以及新年快乐的任何提示!

最佳答案

这确实是一个评论,但很遗憾,我的帐户是新帐户,所以我不被允许...必须要做一个答案。

如果您的虚拟主机运行PHP,我建议您研究一下PHP包含,它们要简单得多。

基本上,您可以将中央html文件另存为.php文件,并包含要使用的HTML文件

<?php

include 'global_body.html';

?>

10-05 21:02
查看更多