html头部底部如何加载

html头部底部如何加载

我们可以尝试iframe无边框 （但是这种方法很笨 并不建议）

<iframe style="min-width:1200px" hspeace= "0" vspace= "0"  runat="server" src="foot.html" width="100%" height="90" frameborder="no" border="0"marginwidth="0" marginheight="0" scrolling="no"allowtransparency="yes"></iframe> 

对前端来说最好的方法就是使用jQuery的load函数

/*导入头部和尾部*/
$(document).ready(function(){
   $(".footer").load("page/footer.html");
});

但是注意，此时的footer.html不需要是完整的HTML，这包含标签内容即可

<!--footer.html页面-->
<footer>
   <ul class="g-flex">
      <li class="g-flex-auto"><a href="#" class="i-b">首页</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">分类</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">订单</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">我的</a></li>
   </ul>
</footer>

如果子页面绑定了Click事件 可能load加载之后会失效 那我们需要这样写

$(".closeBar").on("click",function(){
    alert("*****");
    $("#PublicConfigLogoNavTreeOne").css({ "left": "-100%"});
  });

或者load的时候 绑定 加载页面最外面的DIV

 $(document).ready(function(){
   $("#PublicConfigLogoNavTreeOne").load("leftnav.html #DIV");
});