zoukankan      html  css  js  c++  java
  • 在ie6下remove包含iframe的table所在的容器,会导致页面控件的焦点诡异丢失。

      标题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>

    以上代码在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);

        }


    唉。。。。
  • 相关阅读:
    long和Long的区别
    C语言的变量的内存分配
    Java蓝桥杯 算法提高 九宫格
    Java实现 蓝桥杯算法提高金明的预算方案
    Java实现 蓝桥杯 算法提高 新建Microsoft world文档
    Java实现 蓝桥杯 算法提高 快乐司机
    Java实现 蓝桥杯 算法提高 三角形
    Java实现 蓝桥杯 算法提高 三角形
    Java实现 蓝桥杯 算法提高 三角形
    Java实现 蓝桥杯 算法提高 三角形
  • 原文地址:https://www.cnblogs.com/Random/p/1456038.html
Copyright © 2011-2022 走看看