一、通过jq的load方法引入
<script>
$(function(){
/**
* 公共部分
* 页面只写结点,不用写完整的页面
* js与css不能放在公共页面里
*/
$(".headerPage").load("header.html");
$(".footerPage").load("footer.html");
});
</script>
load里的路径需要修改适合自己的
例子如下
主页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
</head>
<body>
<!-- 顶部导航 -->
<div class="headerPage"></div>
<!--顶部导航 over-->
<h1>我是中间文本</h1>
<!--footer-->
<div class="footerPage"></div>
<!--footer over-->
<script src="/eeza/js/jquery.min.js"></script>
<script>
$(function(){
/**
* 公共部分
* 页面只写结点,不用写完整的页面
* js与css不能放在公共页面里
*/
$(".headerPage").load("header.html");
$(".footerPage").load("footer.html");
});
</script>
</body>
</html>
header与footer页面不要出现<html></html>、<head></head>、<body></body>等标签,只用敲正常页面body里的。
用js的方法,注意js与css,放在主页面中,不能放在header与footer页面,否则会出先jq的问题。
二、使用html转换成js,再引入(推荐)
将html页面转换成js文件,再引入主页面,实际上是通过document对象写入
转换网址:HTML/JS转换工具 - 站长工具
<script type="text/javascript" src="/js/header.js"></script>
路径需要按自己需要填,header.js可以放<head></head>里,footer.js放主页面最下面
这种方法,js和css可以一起写到header.html和footer.html中,一起转换成js语言;
同时header.html和footer.html中的<html></html>、<head></head>、<body></body>等标签也可以不写,写了也没问题
参考文章:总结页面公共部分引入的几种办法_Zoro佐罗的博客-CSDN博客_html公共部分
js实现一个html页面引入另一个html页面_haogemr的博客-CSDN博客_js引入html
如何让html引用公共布局(多个html文件公用一个header.html和footer.html)_康康桑思密达的博客-CSDN博客