在页面上动态添加JavaScript代码【跨浏览器】

    最近一个项目中需要使用MDI，且所有的页面需要动态配置。实现方式是将页面配置成XML，当用户提交请求时系统会合并XML和数据库的配置，Ajax返回客户端由客户端解析生成页面。其中一个实现是将配置在XML的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方法了。

评论

1 楼 mikey_5 2012-07-12  

不错，原来可以这样子添加