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

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

最近做毕业设计做前端时想到多个页面都会使用到相同的头部和尾部,所以一开始是想着用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加载。

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

猜你喜欢

转载自blog.csdn.net/weixin_44356270/article/details/85693345