使页眉和页脚文件包含在多个html页面中
使页眉和页脚文件包含在多个html页面中
提问于 2013-09-10 14:51:05
我想创建共同的页眉和页脚页面，包括在几个html页面。
我想使用javascript。有没有办法只用html和JavaScript就能做到这一点呢？
我想在另一个html页面中加载页眉和页脚页面。
回答 8
Stack Overflow用户
回答已采纳
发布于 2013-09-10 15:08:10
您可以使用jquery来实现这一点。
将此代码放在index.html中
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>并将此代码放在header.html和footer.html中，与index.html位于相同的位置
<a href="http://www.google.com">click here for google</a>现在，当您访问index.html时，您应该能够单击链接标记。
Stack Overflow用户
发布于 2014-12-24 11:47:11
你必须在JavaScript中使用html文件结构吗？你是否考虑过改用PHP，这样你就可以使用简单的PHP包含对象了？
如果将.html页面的文件名转换为.php，则可以在每个.php页面的顶部使用一行代码来包含来自header.php的内容
<?php include('header.php'); ?>在每个页面的页脚中执行相同的操作，以包含footer.php文件中的内容
<?php include('footer.php'); ?>不需要JavaScript / Jquery或其他包含的文件。
注意:您还可以使用.htaccess文件中的以下内容将.html文件转换为.php文件
# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]
# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]Stack Overflow用户
发布于 2015-04-25 05:49:17
您还可以将：(load_essentials.js:)
document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright © " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:you@you.com'>Contact Us</a> / "
+ "<a href='mailto:you@you.com'>Report a problem.</a></p>";<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>
<script src="load_essentials.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18712338
复制相关文章
相似问题