今天发下个情况,当iframe元素在dom树中的位置改变了:
1)在ie9、chrome、safari、firefox浏览器下,iframe在dom中位置改变会引起iframe的指向重新加载,即会在此请求所有资源,并触发iframe自身的onload。
2)但其它像img等也具有src属性的的标签不会引起重新请求。
3)还有如checkBox、select等具有状态的标签改变了dom树中的位置,改变了的状态仍然会维持。
4)但ie6,ie7和ie8下不会引起iframe重新加载。
难道重新加载是讲得过去的理由,所以ie9跟随其它浏览器了?
个人感觉还是不重新加载了的好,没有理由哦。
下面是测试代码:
<!DOCTYPE HTML> <HTML> <BODY> <div id="div1" style="500px;height:500px;background-color:green;left:100px;top:100px;"> <div id="div11" style="300px;height:300px;background-color:yellow"> </div> <iframe id='ifr' src="http://www.baidu.com" onload="alert('加载一次')"></iframe> <!-- <img id='ifr' src='http://www.baidu.com/img/baidu_sylogo1.gif' onload="alert('加载一次')"/>--> <SELECT ID="oSelect" NAME="Cars" SIZE="3" MULTIPLE> <OPTION VALUE="1" SELECTED>宝马 <OPTION VALUE="2">保时捷 <OPTION VALUE="3" SELECTED>奔驰 </SELECT> <input style='float:right' type='button' value='更改在dom中的位置' onclick='changeDom()'/> </div> <script type="text/javascript"> function changeDom(){ //document.getElementById('div1').insertBefore(document.getElementById('ifr'),document.getElementById('div11')); document.getElementById('div11').appendChild(document.getElementById('ifr')); document.getElementById('div11').appendChild(document.getElementById('oSelect')); } </script> </BODY> </HTML>