主頁(yè) > 知識(shí)庫(kù) > iframe節(jié)點(diǎn)初始化的問(wèn)題探討

iframe節(jié)點(diǎn)初始化的問(wèn)題探討

熱門(mén)標(biāo)簽:騰訊植物園地圖標(biāo)注 經(jīng)綸電銷(xiāo)機(jī)器人 外呼智能系統(tǒng)報(bào)價(jià) 電話機(jī)器人宣傳片 個(gè)貸電銷(xiāo)機(jī)器人 浦東新區(qū)百度地圖標(biāo)注圖片 華為收費(fèi)站地圖標(biāo)注 巫山縣地圖標(biāo)注app 鄒城智能外呼系統(tǒng)
今天忽然想著復(fù)習(xí)一下富文本編輯器的制作原理。于是二話不說(shuō)將手把手地做了起來(lái)。因?yàn)橐荒昵皩?xiě)過(guò)一個(gè)簡(jiǎn)單的富文本編輯器,所以大概還是有點(diǎn)印象??墒钱?dāng)我把寫(xiě)出來(lái)的代碼跑一下的時(shí)候,發(fā)現(xiàn)了問(wèn)題:

復(fù)制代碼
代碼如下:

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

大家看看上面的代碼,有沒(méi)有發(fā)現(xiàn)哪里出現(xiàn)了批漏?

我想如果沒(méi)有和我有類(lèi)似經(jīng)歷的童鞋估計(jì)是看不出這段代碼有什么問(wèn)題的。那么大家不妨去跑一下,也許你很快就會(huì)發(fā)現(xiàn)問(wèn)題。

下面由我來(lái)揭曉答案:

這段代碼會(huì)拋找不到對(duì)象的異常。找不到哪個(gè)對(duì)象?找不到document對(duì)象,啥?怎么可能找不到document對(duì)象?當(dāng)然,這個(gè)document對(duì)象是iframe的document對(duì)象。做過(guò)富文本的都知道要先獲取了iframe的document對(duì)象才可以設(shè)置為可編輯。但是為什么我們獲取不了document對(duì)象呢?這里我就不賣(mài)關(guān)子了。我說(shuō)說(shuō)我的解決流程吧。

首先我去谷歌了一下發(fā)現(xiàn)我獲取document的寫(xiě)法是沒(méi)有錯(cuò)的。然后我在想難道是Chrome的原因?難道Chrome抽風(fēng)不支持這兩個(gè)對(duì)象?于是換到了Firefox。結(jié)果還是一樣。那么可以肯定的是,肯定是自己的代碼問(wèn)題。

后來(lái)通過(guò)對(duì)比網(wǎng)上的代碼,發(fā)現(xiàn)自己的appendChild位置有點(diǎn)不對(duì),于是乎就將它提前到了獲取document對(duì)象前:

復(fù)制代碼
代碼如下:

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>');

結(jié)果運(yùn)行一切順利。然后我對(duì)此次的錯(cuò)誤作了分析。其實(shí)這個(gè)錯(cuò)誤的原理很簡(jiǎn)單。大家都知道iframe其實(shí)里面包含的是另一個(gè)文檔,而這個(gè)文檔只有初始化了才能擁有一個(gè)document對(duì)象。而如果沒(méi)有把iframe元素加入到DOM樹(shù)中,iframe中的文檔是不會(huì)初始化的。因此,在一開(kāi)始我們的代碼里,我們獲取的ifr變量中的contentDocument值是null,也就說(shuō)明了此時(shí)iframe中的文檔沒(méi)有初始化。

順著這條線,我再檢查了別的節(jié)點(diǎn)的初始化情況,發(fā)現(xiàn)其實(shí)別的元素節(jié)點(diǎn)只要一旦創(chuàng)建,無(wú)論是否加入到DOM樹(shù)中都會(huì)擁有其本身的屬性和方法。也就是說(shuō)在眾多元素節(jié)點(diǎn)中iframe算是個(gè)異類(lèi)吧。

標(biāo)簽:楊凌 滁州 那曲 三沙 廣西 南平 日喀則 唐山

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《iframe節(jié)點(diǎn)初始化的問(wèn)題探討》,本文關(guān)鍵詞  iframe,節(jié)點(diǎn),初始化,的,問(wèn)題,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《iframe節(jié)點(diǎn)初始化的問(wèn)題探討》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于iframe節(jié)點(diǎn)初始化的問(wèn)題探討的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章