HTML公用模块引用
- 一、创建公共header文件
- 二、导入header模块
- 三、可能会遇到的问题
- 1. "Uncaught ReferenceError: $ is not defined"
开发环境可能会遇到多个Html存在一个模块是相同的，因此在修改过程中逐一修改比较麻烦，因此把这个公用模块另外写就一个html，使用JQuery导入模块。
具体步骤：
- 创建公共 HTML 文件（例如 header.html）
- 在主 HTML 文件中引入 jQuery
- 使用 jQuery 加载公共 HTML 文件
这个场景应该是很少遇到的，毕竟只用前端三件套(js,css,html)不用框架写的还是比较少的。
一、创建公共header文件
将页面中的header模块单独copy一份，创建header.html文件
html"><header><h1>网站标题</h1><nav><ul><li><a href="#home">首页</a></li><li><a href="#about">关于我们</a></li><li><a href="#services">服务</a></li><li><a href="#contact">联系我们</a></li></ul></nav>
</header>
此处不需要引入css之类的样式文件，在引用的主页面的head中引用css就好了，方便管理
二、导入header模块
在main.html中导入之前创建的header模块，此处一定要导入html" title=jquery>jquery，不然会报错哈。
html"><!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的网站</title><!-- 确保 jQuery 在自定义脚本之前加载 --><script defer src="/html" title=jquery>jquery.min.js"></script> #html" title=jquery>jquery导入路径<script>// 使用 jQuery 的 ready 方法，确保 jQuery 已加载$(document).ready(function() {$("#header").load("/header.html"); #header.html的导入路径});</script>
</head>
<body><div id="header"></div> #id是唯一的因此用id比较保险<main><h2>欢迎访问我的网站</h2><p>这是一个示例页面。</p>
</main>
</body>
</html>
需要确保html" title=jquery>jquery和header模块都能够正确加载到浏览器，具体可以按F12查看Source
三、可能会遇到的问题
1. “Uncaught ReferenceError: $ is not defined”
说明html" title=jquery>jquery没有导入成功，或者没有加载就被引用，需要确保 <script>的导入顺序。
