如何在JS中为网页创建动态页眉和页脚？
如何在JS中为网页创建动态页眉和页脚？
提问于 2018-09-08 15:36:44
我正在开发一个网站，有许多网页在网站上，所以我希望页眉和页脚文件动态调用所有网页。
我写了一本剧本，但没有用。请帮帮忙。
下面是脚本：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>BooksThread</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<!--book hover effect files-->
<link rel="stylesheet" type="text/css" href="css/book-hover/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/demo.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/component.css" />
<script src="js/book-hover/modernizr.custom.js"></script>
<!--*------------font awesome---------------*-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--*******************google fonts**************************-->
<link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<!--***************************************************************-->
**<script src="jquery-3.3.1.min.js"></script>**
</head>
**<script>
$(function(){
$("#header").load("header/footer/header.html");
$("#header").load("header/footer/footer.html");
});**
</script>
<body>
**<div id="header"></div>**
<center><h1 style="color: black; padding: 10%;">Starter Template</h1></center>
**<div id="footer"></div>**
</body>
</html>
我创建了一个名为HEADERFOOTER的文件夹，在这个文件夹中，我创建了两个名为header.html和footer.html的HTML文件
HEADER.HTML文件
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>BooksThread</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<!--book hover effect files-->
<link rel="stylesheet" type="text/css" href="css/book-hover/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/demo.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/component.css" />
<script src="js/book-hover/modernizr.custom.js"></script>
<!--*------------font awesome---------------*-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--*******************google fonts**************************-->
<link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<!--***************************************************************-->
<!--[if IE]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--mycode-->
<!---->
</head>
<body>
<!--nav bar-->
<nav class="navbar navbar-expand-lg fixed-top header navbar-light" style="background-color: #fff;">
<a class="navbar-brand" href="index.html"><img src="img/Capture.JPG" alt="BOOKSthread" title="Books Thread" class="img-responsive" style="height: 70px; width: 210px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active nav-heading">
<a class="nav-link nav-head-color" href="#" style="color: black;">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">How It Works</a>
</li>
<li class="nav-item dropdown nav-heading">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: black;">
Category<b class="caret"></b>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="" href="#">Action</a></li>
<li><a class="" href="#">Another action</a></li>
<li><a class="" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">New Arrivals</a>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">Subscription Plan</a>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="search" type="search" placeholder="Search" aria-label="Search" style="width:300px;">
<button class="btn btn-outline-success my-2 my-xl-0" type="submit">Search</button>
</form>
<span> </span>
<button type="button" class="btn btn-primary btn-sm">Login</button>
<span> </span>
<button type="button" class="btn btn-warning btn-sm">Signup</button>
</div>
</nav>
</body>
</html>
FOOTER.HTML文件
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>BooksThread</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<!--book hover effect files-->
<link rel="stylesheet" type="text/css" href="css/book-hover/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/demo.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/component.css" />
<script src="js/book-hover/modernizr.custom.js"></script>
<!--*------------font awesome---------------*-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--*******************google fonts**************************-->
<link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<!--***************************************************************-->
<!--[if IE]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--mycode-->
<!---->
</head>
<body>
<!-- Footer -->
<footer class="page-footer font-small blue-grey lighten-5 mt-4 footer">
<!-- <div style="background-color: #fbc73b;">
<div class="container">
<!-- Grid row
<div class="row py-4 d-flex align-items-center">
<!-- Grid column
<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
<h6 class="mb-0">Get connected with us on social networks!
</h6>
</div>
<!-- social networks list
<div class="col-md-6 col-lg-7 text-center text-lg-right social-networks">
<!-- Facebook
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<!-- Google +
<a href="#" class="google"><i class="fa fa-google"></i></a>
<!--youtube
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="google"><i class="fa fa-youtube"></i></a>
<!--Instagram
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="instagram"><i class="fa fa-instagram"></i></a>
</div>
<!-- Grid column
</div>
<!-- Grid row-
</div>
</div>-->
<!-- Footer Links -->
<div class="container text-center text-md-left mt-5">
<!-- Grid row -->
<div class="row mt-3 dark-grey-text">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mb-4">
<!-- Content -->
<div class="white">
<h6 class="text-uppercase font-weight-bold">booksthread</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>Choose the books you want to read, from the online catalogue and we deliver the physical copies of the books to your homes</p>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">who we are</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">About Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Contact Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Privacy Policy</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Registeration</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">Social Network</h6>
<p class="social-networks">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
</p>
<p class="social-networks">
<a href="#" class="google"><i class="fa fa-google"></i></a>
</p>
<p class="social-networks">
<!--youtube -->
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="google"><i class="fa fa-youtube"></i></a>
</p>
<p class="social-networks">
<!--Instagram-->
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="instagram"><i class="fa fa-instagram"></i></a>
</p>
</div>
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">get in touch</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Lajpat Nagar, India</a>
</p>
<p>
<a class="dark-grey-text none" href="mailto:customercare@booksthread.com" style="text-decoration: none;">customercare@booksthread.com</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">011-41416816</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">FAQ</a>
</p>
</div>
<!-- Grid column -->
<!--<div class="col-md-4 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
<p>
<i class="fa fa-envelope mr-3"></i> info@example.com</p>
<p>
<i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
<p>
<i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
</div>-->
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center text-black-50 py-3 white" style="color:white; background-color: #212121;">
<center><a class="white" href="https://booksthread.com" style="text-decoration: none;">© 2018 Copyright: BOOKSthread</a>
</center>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!---->
</body>
</html>
请帮助在所有页面中创建动态页眉和页脚。
谢谢！！
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-08 16:05:12
为什么不使用ajax来加载内容呢？将此脚本插入头标记中，文件将加载。
<script>
$(function(){
$.ajax({
type: "GET",
url: "header/footer/header.html",
dataType: "html",
success: function(answer) {
$("body").append(answer);
},
error: function(){
alert("failed call!!!");
}
});
return false;
});
</script>
我还看到，您需要包含的文件具有已经放置在主页上的html标记。您不需要重新输入这些标记，而只需要输入受影响的内容(如对于页脚：
<!-- Footer -->
<footer class="page-footer font-small blue-grey lighten-5 mt-4 footer">
<!-- <div style="background-color: #fbc73b;">
<div class="container">
<!-- Grid row
<div class="row py-4 d-flex align-items-center">
<!-- Grid column
<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
<h6 class="mb-0">Get connected with us on social networks!
</h6>
</div>
<!-- social networks list
<div class="col-md-6 col-lg-7 text-center text-lg-right social-networks">
<!-- Facebook
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<!-- Google +
<a href="#" class="google"><i class="fa fa-google"></i></a>
<!--youtube
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="google"><i class="fa fa-youtube"></i></a>
<!--Instagram
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="instagram"><i class="fa fa-instagram"></i></a>
</div>
<!-- Grid column
</div>
<!-- Grid row-
</div>
</div>-->
<!-- Footer Links -->
<div class="container text-center text-md-left mt-5">
<!-- Grid row -->
<div class="row mt-3 dark-grey-text">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mb-4">
<!-- Content -->
<div class="white">
<h6 class="text-uppercase font-weight-bold">booksthread</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>Choose the books you want to read, from the online catalogue and we deliver the physical copies of the books to your homes</p>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">who we are</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">About Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Contact Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Privacy Policy</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Registeration</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">Social Network</h6>
<p class="social-networks">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
</p>
<p class="social-networks">
<a href="#" class="google"><i class="fa fa-google"></i></a>
</p>
<p class="social-networks">
<!--youtube -->
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="google"><i class="fa fa-youtube"></i></a>
</p>
<p class="social-networks">
<!--Instagram-->
<a href="https://www.youtube.com/channel/UCAVLpSGz_chkNQGdcnJyJDA" class="instagram"><i class="fa fa-instagram"></i></a>
</p>
</div>
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">get in touch</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Lajpat Nagar, India</a>
</p>
<p>
<a class="dark-grey-text none" href="mailto:customercare@booksthread.com" style="text-decoration: none;">customercare@booksthread.com</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">011-41416816</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">FAQ</a>
</p>
</div>
<!-- Grid column -->
<!--<div class="col-md-4 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
<p>
<i class="fa fa-envelope mr-3"></i> info@example.com</p>
<p>
<i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
<p>
<i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
</div>-->
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center text-black-50 py-3 white" style="color:white; background-color: #212121;">
<center><a class="white" href="https://booksthread.com" style="text-decoration: none;">© 2018 Copyright: BOOKSthread</a>
</center>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
必须对页眉执行相同的操作，但首先要插入后者，因为函数append()将内容插入到所选元素的末尾，以及页脚放在下面是如何正确的。
Stack Overflow用户
发布于 2020-03-08 07:09:48
您可以按照以下步骤操作：
步骤1:创建footer.js
创建一个包含html内容的文件footer.js，如下所示：
document.writeln('<p> Copyright 2020, G Inc. All Rights Reserved </p>')如果您的document.writeln中有单引号，请将其替换为反斜杠.例：\'text \'
步骤2:将其包含在您的HTML中。
<script language="javascript" type="text/javascript" src="footer.js"></script>您也可以对标头执行同样的操作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52236779
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号