背景：

　　项目中大量用到了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. Notepad++快捷键&正则表达式替换字符串&插件

    Notepad++绝对是windows下进行程序编辑的神器之一,要更快速的使用以媲美VIM,必须灵活掌握它的快捷键,下面对notepad++默认的快捷键做个整理(其中有颜色的为常用招数): 1. 文件 ...

  2. c#数据类型之值类型和引用类型

    C#数据类型分隔为值类型和引用类型.而所用数据类型都继承自Object. 1. 值类型继承自System.ValueType,引用类型继承自System.Object.ValueType也直接继承自O ...

  3. Linux 服务器的网络配置 - 2. 查看 Linux 服务器的进程

    2. 查看 Linux 服务器的进程 1)ps [主要选项] -a  显示系统中所有进程的信息 -e  显示所有进程的信息 -f  显示进行的所有信息 -l   以长格式显示进程信息 -r  只显示正 ...

  4. Redis 数据结构使用场景

    转自http://get.ftqq.com/523.get 一.redis 数据结构使用场景 原来看过 redisbook 这本书,对 redis 的基本功能都已经熟悉了,从上周开始看 redis 的 ...

  5. 我的ZJ解题心得

    想要学好程序设计第一是要养成你的编程思维,也就是你对编程的一种概念和思维定式,长期的解题会让你产生解题经验进而形成一种思维定式,比如看到一个题目就立即想出这题要用什么方法解题这样.编程思维我认为还包括 ...

  6. Zerojudge解题经验交流

    题号:a001: 哈囉 背景知识:输出语句,while not eof 题号:a002: 簡易加法 背景知识:输出语句,while not eof,加法运算 题号:a003: 兩光法師占卜術 背景知识 ...

  7. Windows、VS 与 .net

    原文地址:https://msdn.microsoft.com/en-us/library/bb822049(v=vs.110).aspx .NET Framework version CLR ver ...

  8. Linux： vi 编辑器中文乱码

    [问题] vi编辑器中文乱码 [解决方案] vi /etc/sysconfig/i18n改成如下即可:LANG="en_US.UTF-8"LANGUAGE="zh_CN. ...

  9. SQL Server 之AdventureWorks 2008 安

    学习背景:<SQL Server 2008 编程入门经典> SQL Sever 版本 SQL Server 2008 R2 方法一: 1:AdventureWorks 2008 下载地址: ...

  10. glReadPixels函数

    GPU渲染完数据在显存,回传内存的唯一方式glReadPixels函数... glReadPixels:读取一些像素.当前可以简单理解为“把已经绘制好的像素(它可能已经被保存到显卡的显存中)读取到内存 ...