Javascript动态执行问题浅析

现在web2.0/ajax大行其道，我们会经常碰到这种应用case:前端浏览器通过ajax发请求到后端，后端生成html代码返回，前端接收后将html代码插入一个div容器内。这个应用很普遍，一般情况下也不会有什么问题，特别是返回的是单纯的数据的情况下。但如果返回的html代码包含javascript函数或是css style定义，哪可能就会出现问题了。特别是在IE浏览器下(由此看出，IE浏览器真是垃圾!!真是WEB程序开发者的噩梦啊。)，Javascript动态执行的问题很突出。相对来说，Firefox支持的较好。

下面是一段示例代码：
__cb_render : function( containerId, htmlContent )
{
var oDiv = document.getElementById( containerId );
while( oDiv.childNodes.length > 0 )
{
oDiv.removeChild( oDiv.firstChild );
}

try
{
var container = document.createElement( "div" );
container.innerHTML = htmlContent;
oDiv.appendChild( container );
}
catch ( error )
{
// ignore exception
}
}

这段代码很简单，将soap返回的html代码插入到页面的一个Div容器里。在firefox里执行，okay，一切都没问题。html代码里的Javascript也能正确得以执行。但在IE浏览器里，很抱歉，一堆问题就来了。

首先，如果返回的html代码以<script开头，哪IE浏览器会直接忽略这些Javascript片断(很奇怪吧，你可以试试。)。而且，中间的Javascript代码根本得不到正确执行，还有就是采用<script src="test.js"/>这种方式引入Javascript函数，也无法成功。

所以，对IE浏览器，我们就需要采取一些特殊的解决方案。有一种解决方案，是强行在每个script tag中添加一个属性<script defer="true"......。Defer属性是指浏览器先load完所有html代码，然后去执行相应的Javascript函数。这种解决方案，一般情况下也能得到正确的结果。但笔者并不推荐，尽量少用defer属性。

以下是另一可行的解决方案，也经过了多种主流浏览器的测试。
__cb_render : function( containerId, htmlContent )
{
var oDiv = document.getElementById( containerId );
while( oDiv.childNodes.length > 0 )
{
oDiv.removeChild( oDiv.firstChild );
}

if( BrowserUtility.isIE( ) )
{
// 在html代码开头添加一段空白代码，主要是为了解决script放在开头而被IE忽略的问题
htmlContent = '<span style="display: none"> </span>' + htmlContent;
// 去掉html代码中script tag的defer属性，防止函数被执行两次
htmlContent = htmlContent .replace(/<script(.*)defer([^\s|^>]*)([^>]*)>/gi,'<script$1$3>');
}

try
{
// 先将新的节点append到DOM中
var container = document.createElement( "div" );
container.innerHTML = htmlContent;
oDiv.appendChild( container );
}
catch ( error )
{
// ignore exception
}

var scripts = container.getElementsByTagName( "script" );
for( var i = 0; i < scripts.length; i++ )
{
if( scripts[i].src )
{
// 添加script src到head中
if( BrowserUtility.isIE( ) )
{
var scriptObj = document.createElement( "script" );
scriptObj.setAttribute( "type", "text/javascript" );
scriptObj.setAttribute( "src", scripts[i].src );

var head = document.getElementsByTagName( "head" )[0];
if( head )
head.appendChild( scriptObj );
}
}
else if ( scripts[i].innerHTML )
{
// IE支持该方法去动态执行javascript代码
if ( window.execScript )
window.execScript( scripts[i].innerHTML );
}
}

// 如果是safari或是KHTML浏览器，需要将html代码中包含的css style代码显示的append到head中。
if ( BrowserUtility.isSafari() || BrowserUtility.isKHTML() )
{
var styles = container.getElementsByTagName("style");
for ( var i = 0; i < styles.length; i++ )
{
var styleContent = styles[i].innerHTML;
if ( styleContent )
{
var element = document.createElement("style");
element.type = "text/css";
if ( element.styleSheet )
{
element.styleSheet.cssText = styleContent;
}
else
{
element.appendChild( document.createTextNode( styleContent ) );
}

var head = document.getElementsByTagName( "head" )[0];
if( head )
{
head.appendChild( element );
}
}
}
}
}

以上代码中，还有一点要注意的，就是一定先要将container节点append到DOM中，也就是一定要先落地。不然，在javascript执行顺序上会有些问题的。

好了，就到这吧。搞WEB开发，真是很烦啊!!!