• 在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);

        }


    唉。。。。
  • 相关阅读:
    进程、线程和协程的图解
    Python多线程的原理与实现
    Python多进程原理与实现
    python面试题-1
    数据库事务隔离级别--读未提交,读已提交,重复读,序列化
    java--浅谈线程(二、线程的方法和状态)
    java--浅谈线程(一简单介绍)
    类加载机制--浅谈
    JSP/Servlet Web 学习笔记 DayThree
    JSP/Servlet Web 学习笔记 DayThree —— 实现一个登陆小界面
  • 原文地址:https://www.cnblogs.com/Random/p/1456038.html
Copyright © 2020-2023  润新知