背景：

　　项目中大量用到了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. PHPMyAdmin 显示缺mysqli 扩展的解决方法

    今天在学PHP100视频教程时,装了phpMyAdmin.一开始下载的是最新版本phpMyAdmin-4.1.4-all-languages, 直接500错误,页面怎么也打不开.我用的PHP版本是老版 ...

  2. Vmware web client 5.5 控制台连接不上：Connection timed out

    因XP下安装vsphere client5.5后,无法连接远程vsphere.因此使用vsphere web client. 但是用vsphere web client打开控制台,报错:Conneti ...

  3. ISO 14229 简介 转载

    作者:autogeek 原文链接:http://www.cnblogs.com/autogeek/p/4458591.html 前言 由于工作中经常用到ISO-14229,因此决定对该协议做个总体介绍 ...

  4. V$RMAN_BACKUP_JOB_DETAILS

    V$RMAN_BACKUP_JOB_DETAILS展示了rman备份的相关细节.比如,rman备份持续时间.rman备份的执行次数.每一次rman备份工作的状态(failed or completed ...

  5. XE6移动开发环境搭建之IOS篇（9）：配置XE6的IOS SDK（有图有真相）

    网上能找到的关于Delphi XE系列的移动开发环境的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.开启PAServ ...

  6. eclipse中提示HttpServletRequest不能引用的解决办法

    两种解决方法: 1.右键点击项目->Build Path->Add Libraries..->Server Runtime 选择Apache Tomcat v8.0 2.右键点击项目 ...

  7. 11. Evaluate Reverse Polish Notation

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  8. python os.system()返回值判断

    最近遇到os.system()执行系统命令的情况,上网搜集了一下资料,整理如下,以备不时之需,同时也希望能帮到某些人. 一.python中的 os.system(cmd)的返回值与linux命令返回值 ...

  9. 【Tree 2】树形结构数据呈现的非递归算法（循环）实现

    一.基本概况 上一篇博客介绍到用递归实现树结构数据的查找,那么这篇博客,我就结合自己对于树的理解,然后用一种非递归的方式进行树结构数据的处理.首先,改造数据库表设计,加入度的概念: 首先,layer的 ...

  10. 在Linux下给mysql创建用户并分配权限及问题解决方案

    在linux下安装mysql请参考在linux系统中安装mysql服务器详细步骤 1.新建用户 //登录MYSQL @>mysql -u root -p @>密码 //创建用户 mysql ...