今天忽然想着复习一下富文本编辑器的制作原理。于是二话不说将手把手地做了起来。因为一年前写过一个简单的富文本编辑器，所以大概还是有点印象。可是当我把写出来的代码跑一下的时候，发现了问题：
复制代码代码如下:
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);
大家看看上面的代码，有没有发现哪里出现了批漏？
我想如果没有和我有类似经历的童鞋估计是看不出这段代码有什么问题的。那么大家不妨去跑一下，也许你很快就会发现问题。
下面由我来揭晓答案：
这段代码会抛找不到对象的异常。找不到哪个对象？找不到document对象，啥？怎么可能找不到document对象？当然，这个document对象是iframe的document对象。做过富文本的都知道要先获取了iframe的document对象才可以设置为可编辑。但是为什么我们获取不了document对象呢？这里我就不卖关子了。我说说我的解决流程吧。
首先我去谷歌了一下发现我获取document的写法是没有错的。然后我在想难道是Chrome的原因？难道Chrome抽风不支持这两个对象？于是换到了Firefox。结果还是一样。那么可以肯定的是，肯定是自己的代码问题。
后来通过对比网上的代码，发现自己的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>');
结果运行一切顺利。然后我对此次的错误作了分析。其实这个错误的原理很简单。大家都知道iframe其实里面包含的是另一个文档，而这个文档只有初始化了才能拥有一个document对象。而如果没有把iframe元素加入到DOM树中，iframe中的文档是不会初始化的。因此，在一开始我们的代码里，我们获取的ifr变量中的contentDocument值是null，也就说明了此时iframe中的文档没有初始化。
顺着这条线，我再检查了别的节点的初始化情况，发现其实别的元素节点只要一旦创建，无论是否加入到DOM树中都会拥有其本身的属性和方法。也就是说在众多元素节点中iframe算是个异类吧。
复制代码代码如下:
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);
大家看看上面的代码，有没有发现哪里出现了批漏？
我想如果没有和我有类似经历的童鞋估计是看不出这段代码有什么问题的。那么大家不妨去跑一下，也许你很快就会发现问题。
下面由我来揭晓答案：
这段代码会抛找不到对象的异常。找不到哪个对象？找不到document对象，啥？怎么可能找不到document对象？当然，这个document对象是iframe的document对象。做过富文本的都知道要先获取了iframe的document对象才可以设置为可编辑。但是为什么我们获取不了document对象呢？这里我就不卖关子了。我说说我的解决流程吧。
首先我去谷歌了一下发现我获取document的写法是没有错的。然后我在想难道是Chrome的原因？难道Chrome抽风不支持这两个对象？于是换到了Firefox。结果还是一样。那么可以肯定的是，肯定是自己的代码问题。
后来通过对比网上的代码，发现自己的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>');
结果运行一切顺利。然后我对此次的错误作了分析。其实这个错误的原理很简单。大家都知道iframe其实里面包含的是另一个文档，而这个文档只有初始化了才能拥有一个document对象。而如果没有把iframe元素加入到DOM树中，iframe中的文档是不会初始化的。因此，在一开始我们的代码里，我们获取的ifr变量中的contentDocument值是null，也就说明了此时iframe中的文档没有初始化。
顺着这条线，我再检查了别的节点的初始化情况，发现其实别的元素节点只要一旦创建，无论是否加入到DOM树中都会拥有其本身的属性和方法。也就是说在众多元素节点中iframe算是个异类吧。
标签：
iframe,节点,初始化
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
暂无“iframe节点初始化的问题探讨”评论...
更新日志
2024年11月15日
2024年11月15日
- 顶级装备 实力登顶：三星显示器双十一焕新升级最后冲刺
- 陈影《绝色靓声》WAV+CUE
- 龚玥《禅是一枝花(6N纯银SQCD)》原抓WAV+CUE
- 刘德丽《寂寞在唱歌HQCD+A2HD5》[WAV+CUE]
- 萧亚轩《钻石糖》金牌大风[WAV+CUE][989M]
- 王菲《王菲精选-菲卖品》环球唱片SHM-SACD[ISO][1.9G]
- 孙露《一抹伤HQ》头版限量[WAV+CUE][1G]
- 黄安.1989-一切从头（TP版）【天际唱片】【FLAC分轨】
- 群星.1994-浓情蜜意情歌精丫华纳】【WAV+CUE】
- 邓丽君.1983-淡淡幽情（2022环球MQA-UHQCD限量版）【环球】【WAV+CUE】
- 试音天碟《专业测试第一天碟》经典天碟精选[WAV分轨][1G]
- 试音典范 《情惹发烧情HQCD》人声发烧极品 [WAV+CUE][1G]
- 世界顶级汽车音响试音王《幸福在路上》[低速原抓WAV+CUE][1.1G]
- 老头杯第二届什么时候开始 英雄联盟第二届老头杯开赛时间介绍
- 老头杯第二届什么时候结束 英雄联盟第二届老头杯结束时间介绍