时间戳

首页 > 解决方案 > 我正在尝试使用 JavaScript 或 jQuery 将页眉、主文件和页脚 html 文件从文件夹加载到索引 html 文件？

javascript - 我正在尝试使用 JavaScript 或 jQuery 将页眉、主文件和页脚 html 文件从文件夹加载到索引 html 文件？

问题描述

我确实阅读了很多相同的问题，并且我确实尝试了所有这些问题，但问题就在这里。请放轻松，我在索引文件上使用 PHP 包含来做到这一点，但 Plesk 告诉我我会破坏托管服务器，我必须使用 HTML 索引文件。

我在头脑中这样称呼jQuery：

<!doctype html>
<html lang="en">
<!-- Head start -->

<head>
  
  <title>Advertron ISP - Placeholder</title>
  
  <!-- Custom stylesheets -->
  <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap" rel="stylesheet"/>
  <!-- Advertron ISP CSS -->
  <link rel="stylesheet" href="css/advertronisp.css"/>
  <!-- Custom font kit -->
  <script src="https://kit.fontawesome.com/f6b2049012.js" crossorigin="anonymous"></script>
  <!-- jQuery for replacing content on main html page -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(function() {
      $("#header").load("templates/header-top.html");
      $("#main").load("main.html");
      $("#footer").load("footer.html");
    });
  </script>
</head>
<!--/ Head ends -->

<body>
  <!-- Body start here -->
  <div class="grid-container">
    <!-- Header start here -->
    <div id="header"></div>
    <!--/ Header ends -->
    <!-- Main content -->
    <div id="main"></div>
    <!--/ Main content ends -->
    <!-- Footer start here -->
    <div id="footer"></div>
    <!--/ Footer ends -->
  </div>
  <!--/ Body ends-->
</body>

</html>

这项工作，然后只加载 header-top.html 文件，但是当我插入 (templates/) 时，我从 (main.html) 或 (footer.html) 之前的文件夹调用

然后它不会通过搜索 kit.fontawesomesome 来加载和停止。

我使用我的本地主机作为测试服务器，我在 Linux 上并且 Apache 服务器正在运行。

然后，当有人单击 main.html 文件中的链接或选项卡时，我还喜欢 replaceWith() 必须将 main.html 上的元素 div 替换为其他内容。

我读到我可以使用 XML 或 ajax 或 jQuery 来做到这一点，但我所做的所有尝试都行不通。在我可以解决第一个问题之后，也许这也将解决第二个问题。

祝福克里斯托

标签： javascriptjqueryhtml

解决方案

我在https://www.w3schools.com/howto/howto_html_include.asp中找到了一个解决方案，以解决从文件夹加载页眉、主页和页脚 HTML 文件到索引 HTML 文件的问题。

它要快得多并且有效。因此，如果其他人想要这样做，请使用 W3Schools 中的解决方案。

祝福克里斯托

推荐阅读