jquery load 加载改造,只加载body

时间:2022-05-05 10:00:40

背景:

  项目中大量用到了jquery和easyui组件,原生load经常出现主页面异常,原因是组件被重复初始化。也考虑过用iframe,但是在实际项目中的效果,最终取消了iframe方案,也尝试了其他一些方案,相对好用的便是load改造版。

jquer load详解:http://www.w3school.com.cn/jquery/ajax_load.asp

核心代码:

function loadHTML(url,contener){ // contener:dom对象或者id

   var ctr = contener;

   if(typeof contener == 'string'){

     ctr = $("#"+contener);

  }

  if(ctr){

   $(ctr).load(url+" div:first",function(response,status,xhr){

      // url+" div:first":load的url特别写法格式,即加载html片段

      if(status=="success"){// 数据读取成功后,取body部分的html片段,重新到容器里

      var context = response.substring(response.indexOf("<body"),response.indexOf("</body>")+7);

      $(ctr).html(context);

     }

    });

  }

}

主页面"loadHtml.html":

<html>
 <head>
  <title>加载html</title>
  <!-- 引入jquery基础部分 -->
 <script type="text/javascript">
   $(function(){
      var url = "htmlSpec.html";
      loadHTML(url,"contenerDiv");
   });

// 最重要的部分
   function loadHTML(url,contener){
      var ctr = contener;
      if(typeof contener == 'string'){
         ctr = $("#"+contener);
      }
      if(ctr){
        $(ctr).load(url+" div:first",function(response,status,xhr){

      // url+" div:first":load的url特别写法格式,即加载html片段
           if(status=="success"){// 数据读取成功后,取body部分的html片段,重新到容器里
             var context = response.substring(response.indexOf("<body"),response.indexOf("</body>")+7);
             $(ctr).html(context);
             $.parser.parse(this); // easyui 组件解析
             contextParse(this,true);// 业务系统的组件解析

// 此处再次解析,是因为load加载已过了主页面的加载完成周期,需要再次手动触发解析,才能初始化元素

// easyui组件解析请参考$.parser.parse,

//业务系统的解析这里其实就是多了一个带上下文的选择器:$(selector,context);具体请参考easy ui 零散技巧部分
           }
         });
      }
   }
  </script>

</head>
 <body>
  <div class="easyui-tabs">
      <div title="Tab1" style="padding:20px;">
    <!-- 加载子页面的容器 contenerDiv -->

   <div id="contenerDiv"></div> 
      </div>
      <div title="Tab2" style="overflow:auto;padding:20px;">
          tab2
      </div>
  </div>

</body>
</html>

子页面“htmlSpec.html”:

<html>
 <head>
  <title>加载html</title>
  <!-- jquert集成部分 -->
 </head>
 <script language="javascript">
  
 </script>
 <body id="sdfsdf">
 <div>
  
 <script language="javascript">
  function msg(){
   alert("some message");
  }
    </script>
  <div class="easyui-tabs" style="width:500px;height:250px;">
      <div title="Tab1" style="padding:20px;">
          <button onclick="msg()">alert</button>
      </div>
      <div title="Tab2" style="overflow:auto;padding:20px;">
          tab2
      </div>
  </div>
 </div>
 </body>
</html>

总结:改造后的加载方式,在实际项目中,能有效的解决js冲突,以及使用jquery或easyui组件时,原始load导致组件被重复初始化异常,当然主页面和子页面最好有一定的规范,如:有公共的头文件,自定义的js或者css写在body里。这样就能更好的解决冲突和加载异常了。