鸟食轩

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

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

   

    在这个编辑器中，当光标位于某一行上时，该行会被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 = '';
    }
}