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