标题MS有点绕,就是说,我先在页面中放一个<input type="text"/>;,再动态添加一个div。在div中,我添加一个table子节点,再在table里添加一个iframe子节点。这时如果把焦点移到table里的任何子节点上,再把div给remove掉,就会导致input的焦点丢失,而且鼠标点击也无效。。。以下代码可以看到效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iframe removed</title>
</head>
<body>
<input type="text" value="test text"/>
<input id="btnAdd" type="button" value="add"/>
<input id="btnRm" type="button" value="remove"/>
</body>
<script type="text/javascript">
function $I(id){
return document.getElementById(id);
}
var d=document.createElement("div");
d.innerHTML='<table>'+
'<tr>'+
'<td>'+
'<iframe style="200px;height:200px;" id="ifm1" src="http://www.baidu.com"></iframe>'+
'</td>'+
'<td></td>'+
'</tr>'+
'</table>';
$I("btnRm").onclick=function(){
d.parentNode.removeChild(d);
}
$I("btnAdd").onclick=function(){
document.body.appendChild(d);
$I("ifm1").focus();
}
</script>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iframe removed</title>
</head>
<body>
<input type="text" value="test text"/>
<input id="btnAdd" type="button" value="add"/>
<input id="btnRm" type="button" value="remove"/>
</body>
<script type="text/javascript">
function $I(id){
return document.getElementById(id);
}
var d=document.createElement("div");
d.innerHTML='<table>'+
'<tr>'+
'<td>'+
'<iframe style="200px;height:200px;" id="ifm1" src="http://www.baidu.com"></iframe>'+
'</td>'+
'<td></td>'+
'</tr>'+
'</table>';
$I("btnRm").onclick=function(){
d.parentNode.removeChild(d);
}
$I("btnAdd").onclick=function(){
document.body.appendChild(d);
$I("ifm1").focus();
}
</script>
</html>
以上代码在ie6下运行时, 在点击add之前,text可聚焦且内容可选,
当点击add时候会动态创建一个包含table和iframe的div,并且当前焦点会移到iframe上,这时直接点击remove,
div移除,text不可聚焦且内容不可选(按tab键可激活),不知道这算不算是IE6的一个BUG。。。。
目前解决方法:在remove div的时候,将iframe的src设为空,即在
$I("btnRm").onclick=function(){
d.parentNode.removeChild(d);
}
这里加一句变为:
$I("btnRm").onclick=function(){
$I("ifm1").src="";
d.parentNode.removeChild(d);
}