静态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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM