将 HTML 页面引用到公共页眉和页脚（经亲身测试有效的三种方法）
最编程
2024-03-30 17:25:46
...
HTML静态页面引用公共的头部和底部
方法一：
通过**load()**函数，分别引入公共头部和底部文件;
header.html顶部页面<!DOCTYPE html> <html> <head> <link href="./header.css" rel="stylesheet"> </head> <body> <div class="header"> <h4>头部</h4> </div> </body> </html>footer.html底部页面
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="footer">
<h4>这里是底部</h4>
</div>
</body>
</html>
index.html正文页面
<!DOCTYPE html>
<head></head>
<body>
<!-- 顶部导航 -->
<div class="headerpage"></div>
<!--顶部导航 over-->
<!--中部主体-->
<p>正文部分</p>
<!--中部主体 over-->
<!--footer-->
<div class="footerpage"></div>
<!--footer over-->
<script src="/js/jquery-3.4.1.min.js"></script>/*引用或下载官网最新js代码*/
<script>
$(function(){
/*公共部分
* 导航栏
* footer CopyRight
*/
// $(".headerpage").load("load/header.html");/*浏览器容易引起跨域问题*/
$(".headerpage").load('http://www.load.com/header.html');
$(".footerpage").load("http://www.load.com/footer.html");
});
</script>
</body>
</html>注意：
load函数里最好不要写本地的文件，容易引起跨域问题导致浏览器找不到页面，我这里是用域名来解决的。
方法二：
引用
<object>来实现
<object type="text/x-scriptlet" data="header.html" width=100% height=30></object>方法三：
HTML5 中的
<embed>标签
<embed type="text/html" src="header.html" />小维认为方法一在HTML静态页面中的使用是最合适不过的哦。
注意：方法二和方法三必须设置宽和高，高必须固定，设置auto会出现页面显示不完整的情况。（亲测方法三会出现滚动条）
这里不提iframe，主要因为设计网页相对比较困难，占用线程较多，速度慢，而且也不利于搜索引擎的对头尾的收录。
版权声明：本站原创文章 HTML网页引用公共的头部和底部（亲测有效的三种方法） 由 小维 发表！
转载请注明：HTML网页引用公共的头部和底部（亲测有效的三种方法） - 小维的个人博客
部分素材来源于网络，如有侵权请联系删除！