javascript 如何将页眉导入到HTML的所有页面[duplicate]

iyfjxgzm 于 2023-01-24 发布在 Java

关注(0)|答案(2)|浏览(127)

- 此问题在此处已有答案**：

How can I reuse HTML code across several HTML files（1个答案）
23小时前关门了。
我有头HTML页面，我想实现这个头到所有其他HTML页面。我可以使用HTML或JS吗？没有PHP。我是一个初学者在网络编程，我做了一个简单的前端网站使用HTML和CSS。
标题. html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    
    <title>White Aim</title>
</head>
<body>
    <div id="header">
        <nav class="navbar navbar-expand-lg" >
            <div class="container-fluid">
                <a class="navbar-brand" href="index.html">
                    <img class="logo-style" src="assests/logo.svg" alt="White Aim">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mb-2 mb-lg-0 navbar-text">
                    <li class="nav-item mx-2">
                        <a class="nav-link active" aria-current="page" href="index.html">الصفحة الرئيسية</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="about-us.html">نبذة عنا</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="our-experience.html">خبرتنا</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="contact-us.html">تواصل معنا</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="profile.html">الملف التعريفي</a>
                    </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/75206914/how-to-import-header-to-all-pages-of-html

2条答案

按热度按时间

cpjpxq1n1#

您可以将头代码保存在全局javascript变量中，然后使用insertAdjacentHTML()呈现它
联森：

const header = `
    <div id="header">
        <nav class="navbar navbar-expand-lg" >
            <div class="container-fluid">
                <a class="navbar-brand" href="index.html">
                    <img class="logo-style" src="assests/logo.svg" alt="White Aim">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mb-2 mb-lg-0 navbar-text">
                    <li class="nav-item mx-2">
                        <a class="nav-link active" aria-current="page" href="index.html">الصفحة الرئيسية</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="about-us.html">نبذة عنا</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="our-experience.html">خبرتنا</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="contact-us.html">تواصل معنا</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="profile.html">الملف التعريفي</a>
                    </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
`;

document.addEventListener('DOMContentLoaded', (event) => {
  const homepage = document.querySelector('.homepage');
  homepage.insertAdjacentHTML('afterbegin', header);
});

<body class="homepage">
  <!-- CONTENT -->
  <script src="script.js"></script>
</body>

这样你就可以在所有包含script.js的html文件中呈现你的header变量。请记住，这可能不是一个最佳实践，有更好的方法来创建HTML组件，然而，这将只使用普通的JS而不使用外部库或PHP来完成你所需要的。

赞(0）回复(0）举报 2023-01-24

rsl1atfo2#

在页面加载时可以通过Javascript导入/包含。但是这会导致另一次到服务器的往返，并不必要地降低网站的速度。我不推荐这样做，但如果你想走这条路，你可以看看下面基于https://www.w3schools.com/howto/howto_html_include.asp的Javascript脚本：
网页：

<div w3-include-html="content.html"></div>

约旦：

function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /* Loop through a collection of all HTML elements: */
  z = document.querySelectorAll("[w3-include-html]");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /* Make an HTTP request using the attribute value as the file name: */
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /* Remove the attribute, and call this function once more: */
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /* Exit the function: */
      return;
    }
  }
}

在页面底部：

<script>
includeHTML();
</script>

更好的方法是使用php include，这样服务器就可以执行include，从而节省了往返时间。

<?php include 'footer.php';?>

你也可以选择在创作时使用模板语言进行构建步骤（预处理），这对于初学者来说有点复杂，这有点类似于编写php，但与php不同的是html是在用户请求网站之前组装的，al工作是在网站上线之前完成的。
一些预处理语言是pug，ERB，haml，twig，...下面是一个功能概述：https://css-tricks.com/comparing-html-preprocessor-features/
我不使用它，但我知道Adobe Dreamweaver也有一个功能，你可以包含html片段。然后它用包含的片段构建html，你可以把它放在网上。但我不推荐Dreamweaver。

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 如何将页眉导入到HTML的所有页面[duplicate]

2条答案

相关问题

热门标签

最新问答