iframe连接点原始化的难题讨论

今日突然想着备考1下富文字编写器的制做基本原理。因而2话不说将手门把地做了起来。由于1年前写过1个简易的富文字编写器,因此大约還是有点印象。但是当我把写出来的编码跑1下的情况下,发现了难题:

拷贝编码
编码以下:

var ifr = document.createElement('iframe');
ifr.width = 300;
ifr.height = 300;
var idoc = ifr.contentDocument || ifr.contentWindow.document;
idoc.designMode = 'on';
idoc.contentEditable = true;
idoc.write('<html><head><style>body{ margin:0px; }</style></head><body></body></html>');
document.body.appendChild(ifr);

大伙儿看看上面的编码,有木有发现哪里出現了批漏?

我想假如沒有和我有相近亲身经历的童鞋估算是看不出这段编码有甚么难题的。那末大伙儿何不去跑1下,或许你很快就会发现难题。

下面由我来揭晓回答:

这段编码会抛找不到目标的出现异常。找不到哪一个目标?找不到document目标,啥?如何将会找不到document目标?自然,这个document目标是iframe的document目标。做过富文字的都了解要先获得了iframe的document目标才能够设定为可编写。可是为何大家获得不上document目标呢?这里我就不卖关子了。我说说我的处理步骤吧。

最先我去谷歌了1下发现我获得document的写法是沒有错的。随后我在想难道说是Chrome的缘故?难道说Chrome抽风不适用这两个目标?因而换到了Firefox。結果還是1样。那末能够毫无疑问的是,毫无疑问是自身的编码难题。

后来根据比照在网上的编码,发现自身的appendChild部位有点不对,因而乎就将它提早到了获得document目标前:

拷贝编码
编码以下:

var ifr = document.createElement('iframe');
ifr.width = 300;
ifr.height = 300;
document.body.appendChild(ifr);
var idoc = ifr.contentDocument || ifr.contentWindow.document;
idoc.designMode = 'on';
idoc.contentEditable = true;
idoc.write('<html><head><style>body{ margin:3px; word-wrap:break-word; word-break: break-all; }</style></head><body></body></html>');

結果运作1切圆满。随后我对此次的不正确作了剖析。实际上这个不正确的基本原理很简易。大伙儿都了解iframe实际上里边包括的是另外一个文本文档,而这个文本文档仅有原始化了才可以有着1个document目标。而假如沒有把iframe元素添加到DOM树中,iframe中的文本文档是不容易原始化的。因而,在1刚开始大家的编码里,大家获得的ifr自变量中的contentDocument值是null,也就表明了此时iframe中的文本文档沒有原始化。

顺着这条线,我再查验了其他连接点的原始化状况,发现实际上其他元素连接点要是1旦建立,不管是不是添加到DOM树中都会有着其自身的特性和方式。也便是说在诸多元素连接点中iframe算是个异类吧。