https页面中再次出现莫名的安全警告

    上个月费半天劲搞定了一个https页面中莫名其妙的安全警告,结果今天又被Tester逮到了一个。这个似乎比上一次哪个更有莫名其妙一点点,当然这个安全警告也是一个不能稳定复现的问题。从具体场景来看,说是IE的问题也行,说是实现上的问题似乎也可以。

    具体的出错场景是这样的:页面中有一个IFRAME做的模拟Editor。我们知道,使用元素的ContentEditable属性开启的编辑效果,在输入回车的时候,会默认产生一个<p></p>元素,而输入的内容默认都回被包围在<p>标签中。当我们在这个Editor中删除一行时,这个Editor也会默认帮我们删掉这个<p></p>元素,这样看来似乎是个透明的操作,没有什么问题。但是问题恰恰就来自于这个默认的删除。下面是这个Editor的部分截图:

    QueryEditor.png

    在这个编辑器中,当光标位于某一行上时,该行会被highlight。而这个highlight是通过修改Editor默认插入的P元素的style属性实现的,如上图效果。在移动光标的时候,如果有跨行的行为,也就是从一个P元素进入了另一个P元素,那么就会恢复原来highlight的那个元素,从新highlight新的元素,也就是有一个跟随光标所在位置highlight的效果。如果是移动光标位置,不管怎么操作都是没有任何问题的。可是当我们使用退格键删除一行的时候,我们刚才说了,Editor会自动把删除行的P元素也删掉(实际上是从DOM树中将其移走),这时如果我们再去修改这个已删除的P元素的Style的属性,那么IE就会跳出那个烦人的安全警告窗口(IE6和IE7皆有此问题)。

    这里说一下,虽然元素被删除,但是IE会默认缓存(保留该元素实例)一段时间,所以这时我们仍然可以访问这个被删除的元素,而不会出现运行时错误。当然被从DOM树中删除的元素也有自己的特点,就是它的parentElement会是null。这样我们就只需要在取消highlight的方法上加上对元素parentElement的判断就行了,修改ResumeLine方法的代码为:

function QueryEditor.ResumeLine(line)
{
    
if ( line && line.parentElement )
    
{
        line.runtimeStyle.borderColor 
= '';
        line.runtimeStyle.backgroundColor 
= '';
    }

}

    虽然就这样解决了,不过仍感觉这类问题真是一波还未平息一波又来侵袭的定时炸弹啊。。。

posted on 2007-09-13 20:30  birdshome  阅读(4135)  评论(3编辑  收藏

导航