不同浏览器对iframe与主页面dom树的不同理解
悄悄的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这个事实标准了.