javascript - 在 Javascript 中复制具有不同名称的 HTML 文件(及其内容)

Question

我有一个应用了一些 Javascript 和 css 的 HTML 文件。我想复制那个文件，像 file1.html, file2.html, file3.html,...
所有这些都使用 Javascript、Jquery 或类似的东西!这个想法是创建一个不同的页面(来自那种模板)，之后将打印不同的数据(来自 XML 文件)。我希望这是可能的!如果需要，请随时提出更精确的要求!

先谢谢大家

注意:我不想只复制内容而是整个文件。

编辑:我知道我应该使用服务器端语言，我只是没有这个选项 ):

Answer 1

您可以通过多种方式来实现与您所描述的内容类似的内容。您应该使用哪种实现取决于您的目标。

首先，我会推荐某种模板系统，例如 VueJS、AngularJS 或 React。但是，鉴于您说您不能选择使用服务器端语言，我怀疑您将无法选择实现这些系统之一。

我的下一个建议是构建您自己的“模板系统”。一个可能适合您需求的简单实现可能是以下内容的镜像:

在您要路由或复制其他文件的主文件(根文件)中，您可以使用 JS 来包含正确的 HTML 文件。例如，您可以让 JS 根据特定情况有条件地加载文件，方法是在条件语句后放置如下内容:

请注意，虽然这样做可以优化服务器的数据使用(因为它只会提供所需的文件，而不是一直提供所有内容)，但它也可能会增加加载时间。您的网站需要等待额外的 HTTP 请求通过，并等待任何请求的内容加载和呈现在客户端上。虽然这听起来很慢，但如果您没有太多离散请求并且您的代码都不是异常大或计算量大的话，它可能不会那么糟糕。

如果使用 vanilla JS，以下代码片段将说明上述内容:在随路由文件加载的脚本中:

  function read(text) {
      var xhr=new XMLHttpRequest;
      xhr.open('GET',text);
      xhr.onload=show;
      xhr.send();
  }

  function show() {
      var text = this.response;
      document.body.innerHTML = text;//you can replace document.body with whatever element you want to wrap your imported HTML 
  }

  read(path/to/file/on/server);

请注意有关上述代码的几件事。如果您在没有本地服务器的情况下在您的计算机上进行测试(即在浏览器上打开您的 html 文件，路径类似于 file://__)，那么在尝试发出 XML 请求时，您将遇到某种跨源请求错误。要绕过此错误，请在实际服务器上测试您的代码(我知道这不是理想的不断推送代码)，或者最好设置一个本地测试服务器。如果这是您想要探索的东西，它并不难做到，请告诉我，我很乐意引导您完成整个过程。

或者，您可以使用 jQuery 和 .load() 函数实现上述加载系统。 http://api.jquery.com/load/

如果以上解决方案都不适合您，请更具体地告诉我您需要什么，我很乐意提供更有用/相关的答案!