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">&nbsp;</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开发，真是很烦啊!!!