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开发，真是很烦啊!!!

评论

4 楼 cyfgod 2008-12-09  

呵呵，你还是没有搞清楚这段代码哦。你可以完全参照我的这段代码去写，不会有什么问题的。有一个地方你忽略了，就是不可以直接:
document.getElementById('d').innerHTML=text;

你必须先要创建一个DIV才行。
   try
    {
       // 先将新的节点append到DOM中
        var container = document.createElement( "div" );
       container.innerHTML = text;
       document.getElementById('d')..appendChild( container );
    }
    catch ( error )
    {
        // ignore exception
    }

然后直接复用我后面的代码（对IE的处理），就没有问题了。在IE和Firefox下，都是正确执行的。

顺便说一句，你用document.write可以得到正确的结果，是因为它在输出的时候，可以执行。

3 楼 butnet 2008-12-08  

<BODY>
  <div id='d'>
  </div>
  <script>
  var text = ""
		+'<input type="button" onclick="myclick()" name="btn1" value="Click me"/>  '
        +'<'+'script language="javascript">  '
		+'function myclick()  '
		+'{'  
	    +'alert("Clicking me");  '
		+'}'  
		+'<'+'/'+'script>  ';
 document.getElementById('d').innerHTML=text;//这样不行
 //document.write(text);这样行
 </script>
 </BODY>

你试试这个呢?
我也在IE 和 FF 里没过,
但不行呢...

2 楼 cyfgod 2008-12-04  

butnet 写道

这样运行会有问题我在innerHTML里的内容大概如下function XX (){}我在一个按钮点击时调用会出现XX没有定义的错误.请问:你是怎么解决这个问题的?我后来把函数的定义全改成了window.XX = function(){}这样的就OK了

我试过IE7和Firefox3，都没有你说的哪个问题，这个是返回的html代码。

<input type="button" onclick="myclick()" name="btn1" value="Click me"/>

<script language="javascript">
function myclick()
{
    alert("Clicking me");
}
</script>

无论是script放前还是后面，都是运行正常。

1 楼 butnet 2008-12-04  

这样运行会有问题
我在innerHTML里的内容大概如下
function XX (){}
我在一个按钮点击时调用
会出现XX没有定义的错误.

请问:你是怎么解决这个问题的?

我后来把函数的定义全改成了
window.XX = function(){}
这样的就OK了