背景：

　　项目中大量用到了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. FreeMarker模板引擎

    现在开发的项目,也是基于SOA架构,每个功能接口都是用WebService实现,Web服务的通信协议就是用XML来传输. 以前写WebService都是自动生成XML,没想到这项目竟然要自己定义XML ...

  2. 全面了解 Linux 服务器 - 2. 查看 Linux 服务器的内存使用情况

    2. 查看 Linux 服务器的内存使用情况 liuqian@ubuntu:~$ free -m total used free shared buffers cached Mem: 1983 186 ...

  3. [转] 解决HttpServletResponse输出的中文乱码问题

    首先,response返回有两种,一种是字节流outputstream,一种是字符流printwrite. 申明:这里为了方便起见,所有输出都统一用UTF-8编码. 先说字节流,要输出“中国" ...

  4. CENTOS 6.4 安装oracle 10g,手工建库及升级到10.2.0.5

    一. 数据库软件安装 参照官方手册 1.安装rpm包 注这里的yum直接用163的yum yum -y install binutils compat-libstdc++-33 compat-libs ...

  5. 写CSS的布局

    刚写页面的时候写CSS觉得一个选择器中的每个声明分别占一行看起来舒服些,但随着页面大了,写的东西多了,看起来就很乱了.所以每个声明连着写其实更加好些

  6. EntityFramework基础

    好久没有学习新东西了,最近研究了下EntityFramework,将基础代码贴出来, Entity Framework 利用了抽象化数据结构的方式,将每个数据库对象都转换成应用程序对象 (entity ...

  7. leetcode 137

    137. Single Number II Given an array of integers, every element appears three times except for one. ...

  8. Http的请求对象

    Servlet 客户端 HTTP 请求 当浏览器请求网页时,它会向 Web 服务器发送特定信息,这些信息不能被直接读取,因为这些信息是作为 HTTP 请求的头的一部分进行传输的.您可以查看 HTTP ...

  9. Java之重载与覆盖

    有的时候,类的同一种功能有多种实现方式,到底采用哪种实现方式,取决于调用者给定的参数.例如我们最常用的System.out.println()能够打印出任何数据类型的数据,它有多种实现方式.运行时,J ...

  10. 【浅析】IMU代码

    IMU的代码的引自https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/imumargalgo ...