思有所得见有所得,闻有所得,思亦有所得

<script type="text/javascript">
    function UnicodeToStr(str){
        var re = /&#[\da-fA-F]{1,5};/ig;
        var arr = str.match(re);
        if(arr == null) {
            return str;
        }
        var temp;
        for(var i = 0;i < arr.length; i++){
            str = str.replace(arr[i], String.fromCharCode(arr[i].replace(/[&#;]/g,"")));
        }
        return str; 
    }
    alert(UnicodeToStr("&#37;"));
</script>

悄悄的IE8/firefox/opera与IE6/7/chrome对iframe与主页面dom结构的理解产生了分歧.
在IE6/7/chrome中iframe的dom树与主页面是独立的, 因此将iframe中的节点移动到主页面中会报错.
而在IE8/firefox/opera中iframe的dom树与主页面是相关的, 因此将iframe中的节点移动到主页面中会成功.
测试代码如下

iframe.html:

<div id="testdiv">inside a iframe</div>

主页面:

<iframe id="testiframe" src="iframe.html"></iframe><br />
<div>here is main content</div>
<script type="text/javascript">
    var iframe = document.getElementById("testiframe");
    setTimeout(function(){
        var testdiv = iframe.contentWindow.document.getElementById("testdiv");
        alert(testdiv.innerHTML);
        document.body.appendChild(testdiv);
        document.body.innerHTML += testdiv.outerHTML;
    }, 200);
</script>

首先等待200毫秒让iframe加载进来, 再验证的确取到了iframe中的内容, 然后将节点append到主页面, 然后就观察到了上面所描述的现象.
以上的分歧影响到了其他的JS库, 如JQuery, $("body").append()一样会有问题.
弥补方法则是判断浏览器类型, 然后用innerHTML绕过这个限制.
有趣的是,注释掉appendChild语句后发现, 在所有浏览器中只有firefox不支持outerHTML这个事实标准了.