使用jquery.load 处理 HTML页面公共部分引入

Kingsaj

2056人浏览 · 2020-12-03 16:55:11

Kingsaj · 2020-12-03 16:55:11 发布

HTML公用部分抽离出来使用,使后期维护起来更加方便
在这里插入图片描述
创建一个index.html页面, 和common文件夹(用来存储公用页面部分)

header.html

<header class="mui-bar mui-bar-nav">
	<h1 class="mui-title">头部公共部分</h1>
</header>

footer.html

<footer>底部公用内容</footer>

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML页面公共部分方法</title>
	</head>
	<style type="text/css">
		body {
			text-align: center;
		}
	</style>
	<body>
		<!--  jquery - load方法() 添加公用部分 -->
		<!-- 创建一个id为header的div -->
		<div id="header">
		</div>

		<center>
			<p>我们在每天早上 <time>9:00</time> 起床。</p>
		</center>

		<!-- 创建一个id为footer的div -->
		<div id="footer">
		</div>
		<!-- 引入jq -->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
		<script type="text/javascript">
		      // 1: 直接使用load减少明显的卡顿效果 (可以搭配animate 进行优化)  
				$('#header').load('common/header.html');
				$('#footer').load('common/footer.html');
				// 2:  $(document).ready(fn) 的方法是当document DOM 结构加载完之后触发的的. 并非是等到页面数据全部渲染完毕之后触发的.    $(document).ready(function() {}) 等价于 $(function(){}), 两者写法不同而已.
			$(document).ready(function() {
			    $('#header').load('common/header.html');
			    $('#footer').load('common/footer.html');
			})
			
		</script>
	</body>
</html>

在这里插入图片描述

jQuery load() 方法 详细介绍

经过测试发现使用该方法,可以完成公用顶部底部代码. 但是会出现一个问题! 页面刷新的时候,会有一段时间,div高度塌陷. 等数据请求完之后才会正常.

解决方达:

	<!-- 定高, 添加animate 动画效果 -->
    <div id="header" class="animated fadeInDown" style="height: 230px;">
    </div>

踩坑：使用 jq.load() 本地直接打开文件会报错! 公用部分不会加载出来, 必须要本地启动项目才能加载文件. webstorm可以直接启动,vscode需要Liveserve 启动才可以
在这里插入图片描述

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模