您的位置：首页 > Web前端 > JQuery

jquery load 加载改造，只加载body

2015-12-24 19:42 666 查看

背景：

　　项目中大量用到了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>

<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;">
　　　　

　　 <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>

</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里。这样就能更好的解决冲突和加载异常了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航