iframe的節點初始化-html教學-PHP中文網

這次帶給大家iframe的節點初始化，iframe的節點初始化的注意事項有哪些，下面就是實戰案例，一起來看一下。

今天忽然想著複習一下富文本編輯器的製作原理。於是二話不說將手把手地做了起來。因為一年前寫過一個簡單的富文本編輯器，所以大概還是有點印象。可是當我把寫出來的程式碼跑一下的時候，發現了問題：

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

登入後複製

大家看看上面的程式碼，有沒有發現哪裡出現了批漏？
我想如果沒有和我有類似經歷的童鞋估計是看不出這段程式碼有什麼問題的。那麼大家不妨去跑一下，也許你很快就會發現問題。
下面由我來揭曉答案：
這段程式碼會拋找不到物件的例外。找不到哪個物件？找不到document對象，啥？怎麼可能找不到document物件？當然，這個document物件是iframe的document物件。做過富文本的都知道要先取得了iframe的document物件才可以設定為可編輯。但是為什麼我們取得不了document物件呢？這裡我就不賣關子了。我說說我的解決流程吧。
首先我去谷歌了一下發現我獲取document的寫法是沒有錯的。然後我在想難道是Chrome的原因？難道Chrome抽風不支持這兩個對象？於是換到了Firefox。結果還是一樣。那麼可以肯定的是，肯定是自己的程式碼問題。
後來透過比較網路上的程式碼，發現自己的appendChild位置有點不對，於是乎就將它提前到了獲取document物件前：

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

登入後複製

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

登入後複製

結果運作一切順利。然後我對這一次的錯誤作了分析。其實這個錯誤的原理很簡單。大家都知道iframe其實裡麵包含的是另一個文檔，而這個文檔只有初始化了才能擁有一個document物件。而如果沒有把iframe元素加入DOM樹中，iframe中的文件是不會初始化的。因此，在一開始我們的程式碼裡，我們取得的ifr變數中的contentDocument值是null，也就說明了此時iframe中的文件沒有初始化。

順著這條線，我再檢查了別的節點的初始化情況，發現其實別的元素節點只要一旦創建，無論是否加入到DOM樹中都會擁有其本身的屬性和方法。也就是說在眾多元素節點中iframe算是個異類吧。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！