最近一个项目中需要使用MDI,且所有的页面需要动态配置。实现方式是将页面配置成XML,当用户提交请求时系统会合并XML和数据库的配置,Ajax返回客户端由客户端解析生成页面。其中一个实现是将配置在XML的JavaScript内容动态添加到页面模块中,以下为代码实现
1. XML中定义JavaScript内容
2. 当用户发送请求时动态将XML和数据库内容合并并输出到页面,采用Freemarker模块。关联动态Script的代码是:
添加<pre>标签是因为在页面解析时会过滤掉代码中的格式,若是有注释的话就会出错了。
生成到客户端的页面代码为:
3.客户端根据返回值动态添加JavaScript内容到Head区域
其中header参数为模板中componentType="head"的DIV,module是对应的MDI窗口(根据需要添加)
这样,在页面上就可以调用动态添加的JavaScript方法了。
1. XML中定义JavaScript内容
<Content><![CDATA[
//auto Fill From
function autoFillFrom(obj){
if($(obj).val() == ""){
$(obj).val($(obj).attr('defaultVal'));
}
}
//auto Fill To
function autoFillTo(obj,objFrom){
if($(objFrom).val() == $(objFrom).attr('defaultVal')){
if($(obj).val() == ""){
$(obj).val($(obj).attr('defaultVal'));
}
}else if($(obj).val() == ""){
$(obj).val($(objFrom).val());
}
}
]]></Content>
2. 当用户发送请求时动态将XML和数据库内容合并并输出到页面,采用Freemarker模块。关联动态Script的代码是:
<#assign result=result.objectToReturn>
<#if result.head??>
<div componentType="head" style="display:none;">
<pre>
${result.head.content}
</pre>
</div>
</#if>
添加<pre>标签是因为在页面解析时会过滤掉代码中的格式,若是有注释的话就会出错了。
生成到客户端的页面代码为:
<div style="display: none;" componenttype="head">
<pre>
//auto Fill From
function autoFillFrom(obj){
if($(obj).val() == ""){
$(obj).val($(obj).attr('defaultVal'));
}
}
//auto Fill To
function autoFillTo(obj,objFrom){
if($(objFrom).val() == $(objFrom).attr('defaultVal')){
if($(obj).val() == ""){
$(obj).val($(obj).attr('defaultVal'));
}
}else if($(obj).val() == ""){
$(obj).val($(objFrom).val());
}
}
</pre>
</div>
3.客户端根据返回值动态添加JavaScript内容到Head区域
function JSHeader(header, module) {
var jsContent = header.children('pre').text();
if (jsContent) {
var html_doc = document.getElementsByTagName('head')[0];
js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
//js.innerHTML = jsContent;此句在FF下正常,IE7下通不过
js.text = jsContent;
html_doc.appendChild(js);
}
}
其中header参数为模板中componentType="head"的DIV,module是对应的MDI窗口(根据需要添加)
这样,在页面上就可以调用动态添加的JavaScript方法了。