iframe的節(jié)點(diǎn)初始化
發(fā)表時(shí)間：2023-09-17 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這次給大家?guī)?lái)iframe的節(jié)點(diǎn)初始化，iframe的節(jié)點(diǎn)初始化的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。今天忽然想著復(fù)習(xí)一下富文本編輯器的制作原理。于是二話不說(shuō)將手把手地做了起來(lái)。因?yàn)橐荒昵皩戇^(guò)一個(gè)簡(jiǎn)單的富文本編輯器，所以大概還是有點(diǎn)印象。可是當(dāng)我把寫出來(lái)的代碼跑一下的時(shí)候，發(fā)現(xiàn)了問(wèn)題：...
這次給大家?guī)?lái)iframe的節(jié)點(diǎn)初始化，iframe的節(jié)點(diǎn)初始化的
注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
今天忽然想著復(fù)習(xí)一下富文本編輯器的制作原理。于是二話不說(shuō)將手把手地做了起來(lái)。因?yàn)橐荒昵皩戇^(guò)一個(gè)簡(jiǎn)單的富文本編輯器，所以大概還是有點(diǎn)印象�？墒钱�(dāng)我把寫出來(lái)的代碼跑一下的時(shí)候，發(fā)現(xiàn)了問(wèn)題：
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)有和我有類似經(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ì)象呢？這里我就不賣關(guān)子了。我說(shuō)說(shuō)我的解決流程吧。
首先我去谷歌了一下發(fā)現(xiàn)我獲取document的寫法是沒(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ù)習(xí)一下富文本編輯器的制作原理。于是二話不說(shuō)將手把手地做了起來(lái)。因?yàn)橐荒昵皩戇^(guò)一個(gè)簡(jiǎn)單的富文本編輯器，所以大概還是有點(diǎn)印象�？墒钱�(dāng)我把寫出來(lái)的代碼跑一下的時(shí)候，發(fā)現(xiàn)了問(wèn)題：
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)有和我有類似經(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ì)象呢？這里我就不賣關(guān)子了。我說(shuō)說(shuō)我的解決流程吧。
首先我去谷歌了一下發(fā)現(xiàn)我獲取document的寫法是沒(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ì)象前：
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樹中，iframe中的文檔是不會(huì)初始化的。因此，在一開始我們的代碼里，我們獲取的ifr變量中的contentDocument值是null，也就說(shuō)明了此時(shí)iframe中的文檔沒(méi)有初始化。
順著這條線，我再檢查了別的節(jié)點(diǎn)的初始化情況，發(fā)現(xiàn)其實(shí)別的元素節(jié)點(diǎn)只要一旦創(chuàng)建，無(wú)論是否加入到DOM樹中都會(huì)擁有其本身的屬性和方法。也就是說(shuō)在眾多元素節(jié)點(diǎn)中iframe算是個(gè)異類吧。
結(jié)果運(yùn)行一切順利。然后我對(duì)此次的錯(cuò)誤作了分析。其實(shí)這個(gè)錯(cuò)誤的原理很簡(jiǎn)單。大家都知道iframe其實(shí)里面包含的是另一個(gè)文檔，而這個(gè)文檔只有初始化了才能擁有一個(gè)document對(duì)象。而如果沒(méi)有把iframe元素加入到DOM樹中，iframe中的文檔是不會(huì)初始化的。因此，在一開始我們的代碼里，我們獲取的ifr變量中的contentDocument值是null，也就說(shuō)明了此時(shí)iframe中的文檔沒(méi)有初始化。
順著這條線，我再檢查了別的節(jié)點(diǎn)的初始化情況，發(fā)現(xiàn)其實(shí)別的元素節(jié)點(diǎn)只要一旦創(chuàng)建，無(wú)論是否加入到DOM樹中都會(huì)擁有其本身的屬性和方法。也就是說(shuō)在眾多元素節(jié)點(diǎn)中iframe算是個(gè)異類吧。
相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
html標(biāo)準(zhǔn)寫法與dreamweaver生成代碼有哪些不一樣
如何使用iframe在當(dāng)前網(wǎng)頁(yè)中嵌入其他網(wǎng)頁(yè)
在html里怎么添加flash視頻格式(flv、swf)文件
谷歌瀏覽的label與input間距問(wèn)題應(yīng)該如何解決
HTML的頭標(biāo)簽meta如何實(shí)現(xiàn)refresh重新定向
以上就是iframe的節(jié)點(diǎn)初始化的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
