主页面引入header.html与footer.html

赛巴斯安

已于 2022-03-23 23:49:05 修改

阅读量1.7k

点赞数

分类专栏：开发前端文章标签：前端 javascript html

于 2022-03-23 16:36:09 首次发布

原文链接：https://blog.csdn.net/suolong914/article/details/80156669

版权

开发前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、通过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博客

赛巴斯安

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
主页面引入header.html与footer.html

<script> $(function(){ /** * 公共部分 * 页面只写结点，不用写完整的页面 * js与css不能放在公共页面里 */ $(".headerPage").load("header.html"); $(".footerPage").load("footer.html"); });</script>load里的路径需要修改适合自己的例子如下...
复制链接

扫一扫