静态HTML文件从外部调入HTML模板（如头部、页尾这些公共的部分）

1、使用Ajax动态拉取填充

$(document).ready(function(){
    $('.top').load('topic-top.html');
    $('.footer').load('topic-footer.html');
});

$(document).ready(function(){
  $.ajax(function(){
    url: url, //这里是静态页的地址
    type: "GET",//静态页用get方法，否则服务器会报405错误
    success: function(data){
      var result = $(data).find('另一个html页面中指定的一部分');
      $('本页面的ele').html(result);
    }
  })
)

2、服务端shtml包含

3、自己写代理（比如用node），请求文件的时候自动加上头尾文件
4、使用iframe(不推荐)

总之：用ajax 就行了

需要注意的是：
1 ajax是异步加载，需要把async设置成false。 2 Chrome不支持本地Ajax请求，chrome不支持本地打开页面，不能加载这个HTML文件（在火狐上是没问题的）
3 引入的是html格式。引入的文件 只有html内容，不带head 等信息！

补充：responseText   --------------   ajax处理服务器端返回结果

用法：

$("#foot").html($.ajax({url: "../wxpage/foot.html", async: false}).responseText);

 

console.log($.ajax({
        type:"get",
        url:"stocks_list.html",
        dataType:"html",
        async:false,
        success:function(data){
            $("body").append(data);
            funs.init();
        }
    }).responseText)

　　

 

 

 

 

 

 

 

333

 

转载于:https://www.cnblogs.com/lovelgx/articles/7493150.html