背景：

　　项目中大量用到了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里。这样就能更好的解决冲突和加载异常了。

jquery load 加载改造，只加载body的更多相关文章

  1. 【Android】再来一篇Fragment懒加载（只加载一次哦）

    效果 老规矩,先来看看效果图 没错,我又入坑了,又重新做了个 Gank 客户端,因为之前那个代码写得太烂了,这次有好好的考虑了下架构之类的事,代码应该会更容易读懂了点了,吧.哈哈,再次欢迎来 star ...

  2. 关于IE8中使用Jquery load方法无法正常加载页面

    最近发现,在IE8中使用Jquery load方法时无法正常加载页面,页面显示空白,没有加载.调试发现,页面多了一个</div>标签,但在FF和CH下表现正常.希望能给遇到同样问题的码农有 ...

  3. chrome浏览器下用jQuery的load函数来跨域加载页面，响应状态status为(canceled)是什么情况？ JSON和JSONP，也许你会豁然开朗，含jQuery用例

    http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 问题来源:http://q.cnblogs.com ...

  4. jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案

    1. 前言 由于项目需要,需要load一个页面并保持ajax返回的div能响应其页面内的JS的click事件.这个不是 解决用jquery load加载页面到div时,不执行页面js的问题 这类问题, ...

  5. IE8中jQuery.load()加载页面不显示的原因

    一.jQuery.load() jQuery.load(url,[data],[callback])通过Ajax异步请求加载服务器中的数据,并把数据放到指定元素中. url :请求服务器的地址 dat ...

  6. jQuery load() 判断 iframe 是否加载完毕

    判断 iframe 是否加载完毕  方法.jQuery load() var frm = document.getElementById('myiframe'); $(frm).load(functi ...

  7. Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载

    http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...

  8. 使用jquery插件实现图片延迟加载--懒加载技术

    原文链接:http://www.cnblogs.com/lei2007/archive/2013/05/31/3110725.html 感谢作者.以下为原文,备忘仅供自己学习. 第一:lazyLoad ...

  9. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  10. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

随机推荐

  1. NBU7.0.1迁移C:\Veritas\Netbackup\db到其他盘

    原来NBU MASTER安装在C盘了,导致C盘空间剩余很少,在官网找了一个解决方案如下: - before any operation, of course backup your catalog a ...

  2. zen coding和emmet

    zen coding 改名为 emmet http://emmet.io/download/

  3. （LinkedList） Remove Linked List Elements

    Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...

  4. jquery 监听radio选中，取值

    $(document).ready(function(){ $("input[name=discount]").each(function(){ $(this).click(fun ...

  5. Data Science at the Command Line学习笔记（二）

    1.vagrant建立简单httpserver方法: 1)映射端口 修改Vagrantfile, 末尾添加本地端口和虚机端口的映射关系, 然后执行vagrant reload. Vagrant::Co ...

  6. Installing Erlang

    Installing Erlang Pre-built binaries for most common platforms. Source code releases from the main E ...

  7. c# webform网站图片另存代码

    好辛苦生成了二维码,然后要实现点击“保存图片”,弹出选择路径进行保存的效果. look: string qrcodeurl = ""; string username = &quo ...

  8. Android ImageView显示本地图片

    Android ImageView 显示本地图片 布局文件 <?xml version="1.0" encoding="utf-8"?> <R ...

  9. 纸上谈兵：左倾堆（leftist heap）

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们之前讲解了堆(heap)的概念.堆是一个优先队列.每次从堆中取出的元素都是堆中 ...

  10. java的InputStream和OutputStream的理解【转】

    1.在java中stream代表一种数据流(源),javaio的底层数据元,---(想像成水龙头)2.任何有能力产生数据流(源)的javaio对象就可以看作是一个InputStream对象既然它能产生 ...