Html引入公共页面的踩坑

最新推荐文章于 2022-10-21 10:54:55 发布

平井缘

最新推荐文章于 2022-10-21 10:54:55 发布

阅读量305

点赞数 2

文章标签： html ajax

本文链接：https://blog.youkuaiyun.com/weixin_45693257/article/details/117363425

版权

博客介绍了在网页开发中，为了方便维护，使用Jquery的load()方法将头部和底部内容进行局部加载。然而，这种方式在跨域时会导致错误，特别是在Chrome和Edge等webkit内核浏览器上可能引发页面闪烁。解决方法是避免在本地测试时使用这些浏览器。参考链接提供了一个详细的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为网站的导航栏和底部都是一样，不共用的话，修改起来很麻烦。

网上最推荐的方法：Jquery的load()，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
			        $(".headerPage").load("header.html");
			        $(".footerPage").load("footer.html");
			});
		</script>
	</head>
	<body>
		<div class="headerPage"></div>
		<div>content</div>
		<div class="footerPage"></div>	
	</body>
</html>