前端之家

  1. 首页
  2. 问答

如何在包含100多个网页的网站中使用javacript组件实现HTML Header（navbar）

• 问答

我有一个包含200多个网页的网站，其中包含一个导航栏（标题）。我如何使其自动化，所以我不必担心使用JavaScript在所有200多个网页中更改标题。 实现此目标的最佳方法是什么。 预先感谢！

我已使用Jquery如下实现，但导航栏未显示。 （）

    <link rel="stylesheet" href="../../assets/vendor/cubeportfolio/css/cubeportfolio.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <script src="jquery.js"></script>
        <script>
            $(function () {
                    $("#includedContent").load("../../html/home/header.html");
            });
        </script>

    <!-- CSS Front Template -->
    <link rel="stylesheet" href="../../assets/css/theme.css">

    <!-- CSS Front Doc -->
    <link rel="stylesheet" href="../../documentation/assets/css/starter.css">

</head>

<body>
    <!-- ========== HEADER ========== -->
    <header id="includedContent"></header>
    <!-- ========== END HEADER ========== -->

我使用了includeContent id并将其链接到header.html页面。 header.html页面示例附在下面

<!-- ========== HEADER ========== -->
<header id="header" class="u-header u-header--hide-topbar u-header--sticky-top-md u-header--show-hide-md "
    data-header-fix-moment="500" data-header-fix-effect="slide">
    <!-- Search -->
    <div id="searchPushTop" class="u-search-push-top">
        <div class="container position-relative">
            <div class="u-search-push-top__content">
                <!-- Close Button -->
                <button type="button" class="close u-search-push-top__close-btn" aria-haspopup="true"
                    aria-expanded="false" aria-controls="searchPushTop" data-unfold-type="jquery-slide"
                    data-unfold-target="#searchPushTop">
                    <span aria-hidden="true">&times;</span>
                </button>
                <!-- End Close Button -->

                <!-- Input -->
                <form class="js-focus-state input-group">
                    <input type="search" class="form-control" placeholder="Search Front" aria-label="Search Front">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-primary">Search</button>
                    </div>
                </form>
                <!-- End Input -->

                <!-- Content -->
                <div class="row d-none d-md-flex mt-7">
                    <div class="col-sm-6">
                        <strong class="d-block mb-2">Quick Links</strong>

                        <div class="row">
                            <!-- List Group -->
                            <div class="col-6">
                                <div class="list-group list-group-transparent list-group-flush list-group-borderless">
                                    <a class="list-group-item list-group-item-action" href="#">
                                        <span class="fas fa-angle-right list-group-icon"></span>
                                        Search Results List
                                    </a>
                                    <a class="list-group-item list-group-item-action" href="#">
                                        <span class="fas fa-angle-right list-group-icon"></span>
                                        Search Results Grid
                                    </a>
                                    <a class="list-group-item list-group-item-action" href="#">
                                        <span class="fas fa-angle-right list-group-icon"></span>
                                        About
                                    </a>
                                    <a class="list-group-item list-group-item-action" href="#">
                                        <span class="fas fa-angle-right list-group-icon"></span>
                                        Services
                                    </a>
                                    <a class="list-group-item list-group-item-action" href="#">
                                        <span class="fas fa-angle-right list-group-icon"></span>
                                        Invoice
                                    </a>
                                </div>
                            </div>
                            <!-- End List Group -->

                            <!-- List Group -->
                            <div class="col-6">
                                <div class="list-group list-group-transparent list-group-flush list-group-borderless">
                                    <a class="list-group-item list-group-item-action" href="#">
                                        <span class="fas fa-angle-right list-group-icon"></span>
                                        Profile
                                    </a>
                                    <a class="list-group-item list-group-item-action" href="#">
                                        <span class="fas fa-angle-right list-group-icon"></span>
                                        User Contacts
                                    </a>
                                    <a class="list-group-item list-group-item-action" href="#">
                                        <span class="fas fa-angle-right list-group-icon"></span>
                                        Reviews
                                    </a>
                                    <a class="list-group-item list-group-item-action" href="#">
                                        <span class="fas fa-angle-right list-group-icon"></span>
                                        Settings
                                    </a>
                                </div>
                            </div>
                            <!-- End List Group -->
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <!-- Banner -->
                        <div class="rounded u-search-push-top__banner">
                            <div class="d-flex align-items-center">
                                <div class="u-search-push-top__banner-container">
                                    <img class="img-fluid u-search-push-top__banner-img"
                                        src="../../assets/img/mockups/img3.png" alt="Image Description">
                                    <img class="img-fluid u-search-push-top__banner-img"
                                        src="../../assets/img/mockups/img2.png" alt="Image Description">
                                </div>

                                <div>
                                    <div class="mb-4">
                                        <strong class="d-block mb-2">Featured Item</strong>
                                        <p>Create astonishing web sites and pages.</p>
                                    </div>
                                    <a class="btn btn-xs btn-soft-success transition-3d-hover" href="index.html">Apply
                                        Now <span class="fas fa-angle-right ml-2"></span></a>
                                </div>
                            </div>
                        </div>
                        <!-- End Banner -->
                    </div>
                </div>
                <!-- End Content -->
            </div>
        </div>
    </div>
    <!-- End Search -->

    <div class="u-header__section">

        <div id="logoandNav" class="container">
            <!-- Nav -->
            <nav class="js-mega-menu navbar navbar-expand-md u-header__navbar u-header__navbar--no-space">
                <!-- Logo -->
                <a class="navbar-brand u-header__navbar-brand u-header__navbar-brand-center"
                    href="../../html/home/index6.html" aria-label="Front">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        width="46px" height="46px" viewBox="0 0 46 46" xml:space="preserve" style="margin-bottom: 0;">
                        <path fill="#3F7DE0" opacity=".65"
                            d="M23,41L23,41c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18h11.3C38,5,41,8,11.7V23C41,32.9,23,41z" />
                        <path class="fill-info" opacity=".5"
                            d="M28,35.9L28,35.9c-9.9,18-18l11.3,0C43,46,3,6.6V18C46,27.9,38,35.9,28,35.9z" />
                        <path class="fill-primary" opacity=".7"
                            d="M18,46L18,46C8,28v0c0-9.9,18-18h11.3c3.7,6.6,6.6V28C35.9,18,46z" />
                        <path class="fill-white" d="M17.4,34V18.3h10.2v2.9h-6.4v3.4h4.8v2.9h-4.8V34H17.4z" />
                    </svg>
                    <span class="u-header__navbar-brand-text">Title</span>
                </a>
                <!-- End Logo -->

                <!-- Responsive Toggle Button -->
                <button type="button" class="navbar-toggler btn u-hamburger" aria-label="Toggle navigation"
                    aria-expanded="false" aria-controls="navBar" data-toggle="collapse" data-target="#navBar">
                    <span id="hamburgertrigger" class="u-hamburger__box">
                        <span class="u-hamburger__inner"></span>
                    </span>
                </button>
                <!-- End Responsive Toggle Button -->

                <!-- Navigation -->
                <div id="navBar" class="collapse navbar-collapse u-header__navbar-collapse">
                    <ul class="navbar-nav u-header__navbar-nav">

                        <!-- Button -->
                        <li class="nav-item u-header__nav-last-item">
                            <a href="../../html/home/index6.html">
                                <i class="fas fa-home fa-lg" style="color:rgb(30,144,255);">
                                    <!-- icon --></i>
                            </a>
                        </li>
                        <!-- End Button -->

                        <!-- About Title -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item" data-event="hover"
                            data-animation-in="slideInUp" data-animation-out="fadeOut" data-max-width="900px"
                            data-position="right">
                            <a id="aboutgssyMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle"
                                href="javascript:;" aria-haspopup="true" aria-expanded="false">About GSSY</a>

                            <!-- About - Mega Menu -->
                            <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="aboutgssyMegaMenu">
                                <div class="row no-gutters">
                                    <div class="col-lg-12">
                                        <div class="u-header__promo-card-deck">
                                            <!-- ST-1 Item -->
                                            <div class="u-header__promo-card u-header__promo-item">
                                                <a class="u-header__promo-link" href="../../html/home/whatisgssy.html">
                                                    <div class="media align-items-center">
                                                        <div class="media-body">
                                                            <span class="u-header__promo-title transition-3d-hover">ST-1</span>
                                                            <small class="u-header__promo-text">Find out more </small>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <!-- End ST-1 Item -->

                                        </div>

                                    </div>
                                </div>
                            </div>
                            <!-- End About - Mega Menu -->
                        </li>
                        <!-- End About Title -->

                    </ul>
                </div>
                <!-- End Navigation -->
            </nav>
            <!-- End Nav -->
        </div>
    </div>
</header>
<!-- ========== END HEADER ========== -->

a497685123 回答：如何在包含100多个网页的网站中使用javacript组件实现HTML Header（navbar）

您已将此问题标记为PHP和JS，所以我强烈建议您在PHP（或您可能使用的任何其他服务器端语言）中进行一些常见的包含，而不要尝试之所以在客户端执行此操作（如smootok所示），主要是因为它将使FAR更可靠，而且还因为它在客户端上也将变得更快。

例如：<?php include("includes/header.php");?>

,

您可以使用所需的内容创建一个新的文件头，然后使用 w3-include-html 属性

包含它

示例

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

添加javascript 

<script>
function includeHTML() {
  var z,i,elmnt,file,xhttp;
  /* Loop through a collection of all HTML elements: */
  z = document.getElementsByTagName("*");
  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",true);
      xhttp.send();
      /* Exit the function: */
      return;
    }
  }
}
</script>

在页面底部调用includeHTML（）：

<script>
includeHTML();
</script>

参考： https://www.w3schools.com/howto/howto_html_include.asp

bootstrap-4htmlincludejavascriptjquery
本文链接：https://www.f2er.com/3096399.html

大家都在问