类似iFrame将多个页面合在一起的方法

最新推荐文章于 2024-05-08 12:48:33 发布

Wes_b

最新推荐文章于 2024-05-08 12:48:33 发布

阅读量5.1k

点赞数 1

分类专栏：弄着玩文章标签：新手试手

本文链接：https://blog.csdn.net/weixin_44356270/article/details/85693345

版权

弄着玩专栏收录该内容

3 篇文章

订阅专栏

在前端开发中，为了解决多个页面共用头部和尾部的问题，作者尝试了使用iFrame和jQuery Load方法。iFrame在解决动态效果和CSS样式冲突的同时，带来了页面混乱和嵌套问题。通过设置iFrame中a标签的target属性为"_parent"，成功解决了点击链接导致的页面混乱问题。

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

iFrame和Load将多个页面合在一起的方法

最近做毕业设计做前端时想到多个页面都会使用到相同的头部和尾部，所以一开始是想着用Frame把页面加载进去。

<body>
		<iframe src="header.html"  width="100%" height="auto" marginwidth="0" marginheight="0" HSPACE="0" VSPACE="0" FRAMEBORDER="0"></iframe>
		<p class="test">空白测试 </p>
		<iframe src="footer.html"  width="100%" height="350px" marginwidth="0" marginheight="0" HSPACE="0" VSPACE="0" FRAMEBORDER="0" ></iframe>
</body>

但是使用后发现我的头部页面header的动态效果没了，往下滚动时设置的DIV固定顶部没有了效果，也显示不全页面，右侧导航栏也不显示出来，没有达到效果。

之后百度出了用JQurey加载的方法

<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$(".headerpage").load("header.html");
			});
		</script>

<body>
		<div class="headerpage"></div>
		<p class="one">I am here</p>
</body>
<iframe src="footer.html" marginwidth="0" marginheight="0" HSPACE="0" VSPACE="0" FRAMEBORDER="0" SCROLLING="no" width="100%" height="400px"></iframe>

解决了header的显示以及动态效果问题，因为header跟footer的CSS样式好像有冲突，并且footer没有动态效果，所以将footer用iFrame加载。

接下来继续完成其他网页看看是否有使用问题。

手动分割，遇到问题了
在点击Load方法加载的页面里的a标签是没有问题，但是点击下面iFrame嵌套的a标签时就会出现多次嵌套，页面混乱的问题
如图
在这里插入图片描述