时间戳

首页 > 解决方案 > HTML中是否有从另一个文件导入HTML代码的功能？

javascript - HTML中是否有从另一个文件导入HTML代码的功能？

问题描述

基本上，我的网站有几个部分、一个标题、两个侧边栏和一个页脚，主要内容位于中心。我为这个设计的大部分格式使用了一个表格。我想做的是为每个通用部分、页眉页脚和侧边栏创建一个 HTML 文件。这样，当我需要更改其余页面上的某些内容时，我就不必编辑每个页面。

我通常会使用 PHP 来执行此操作，但我正在使用的服务器不读取 PHP，而且似乎我无法让 IT 人员安装它。我尝试了 JavaScript 方法，但 JavaScript 方法似乎不起作用，我不知道为什么。这是我尝试的 JavaScript I 方法的一个示例：

  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $('#header').load("header.html");
        $('#rsbar').load("rsbar.html");
        $('#lsbar').load("lsbar.html");
        $('#footer').load("footer.html");
     });
  </script>
  </head>
  <body>
     <div id="header"></div>
     <div id="rsbar"></div>
     <div id="lsbar"></div>
     <div id="footer"></div>
  </body>

页眉 rsbar lsbar 和页脚将是单独的 HTML 文件，我想从中提取代码。

另外，如果我能让这种方法起作用。如果我的文件结构看起来更像这样：

html
-->header
-->footer
-->lsbar
-->rsbar
css
js
images
pdfs
pages

并且我想用来通过使用 JavaScript 调用标头 HTML 的文件位于页面中，对于返回一个目录然后返回 HTML 的代码，文件路径将作为“../html/header.html”作为例子？我在尝试这个时遇到了问题，但似乎找不到我用来将目录向上移动一个文件夹的其他东西......

标签： javascripthtml

解决方案

如果索引文件位于根目录，而其他页面位于名为 html 的文件夹中，则更像是这样：

<script>
 $(document).ready(function(){
    $('#header').load("html/header.html");
    $('#rsbar').load("html/rsbar.html");
    $('#lsbar').load("html/lsbar.html");
    $('#footer').load("html/footer.html");
  });
</script>

您应该查看浏览器控制台以查看是否有任何失败的请求。

推荐阅读