類似iFrame將多個頁面合在一起的方法
阿新 • • 發佈：2019-01-03
類似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載入。
接下來繼續完成其他網頁看看是否有使用問題。