iframeノードの初期化に関する議論_HTML/Xhtml_Webページ制作

今日は突然、リッチ テキスト エディターの作成原理を復習したいと思いました。それで私は何も言わずに少しずつそれを始めました。 1 年前にシンプルなリッチ テキスト エディターを作成したので、おそらく今でも印象に残っていることがあります。しかし、私が書いたコードを実行すると、問題が見つかりました。

コードをコピーします

コードは次のとおりです。

var ifr = document.createElement('iframe');
ifr.width = 300;
var idoc = ifr.contentDocument || ifr .contentWindow.document;
idoc.designMode = 'on';
idoc.contentEditable = true; ');
document.body.appendChild(ifr); > 上記のコードを見てください。エラーは見つかりましたか?

私と同じような経験をした子供たちがいなかったら、おそらくこのコードの何が問題なのか理解できないと思います。だから、走ってみるのもいいかもしれません。問題はすぐに見つかるかもしれません。

以下に答えを明らかにしましょう:

このコードはオブジェクトが見つからない例外をスローします。見つからないオブジェクトはどれですか?ドキュメント オブジェクトが見つかりません。何ですか?ドキュメント オブジェクトが見つからないということはどのようにして起こり得るのでしょうか?もちろん、このドキュメント オブジェクトは iframe のドキュメント オブジェクトです。リッチ テキストを作成したことがある人なら、編集可能にする前に、まず iframe のドキュメント オブジェクトを取得する必要があることを知っています。しかし、なぜドキュメントオブジェクトを取得できないのでしょうか?ここではあまり大げさなことはしません。私の解決プロセスについて話しましょう。

まず、Google で調べたところ、書類の入手方法は正しかったことがわかりました。じゃあChromeだったのかな？ Chrome はこれら 2 つのオブジェクトをサポートしていませんか?そこでFirefoxに切り替えました。結果は依然として同じです。その場合、確かなことは、それはあなた自身のコードに問題があるに違いないということです。

その後、インターネット上のコードを比較すると、appendChild の位置が少し間違っていることがわかったので、事前に移動してドキュメント オブジェクトを取得しました。





コードをコピー

コードは次のとおりです。 var ifr = document.createElement('iframe'); >ifr.width = 300; ifr.body.appendChild(ifr);

var idoc = ifr.contentWindow.document; designMode = 'on';

idoc.contentEditable = true;

idoc.write('');


結果はスムーズに実行されました。そこで今回のエラーを分析してみました。実際、このエラーの理由は非常に単純です。 iframe には実際には別のドキュメントが含まれており、このドキュメントは初期化された後にのみドキュメント オブジェクトを持つことができることは誰もが知っています。また、iframe 要素が DOM ツリーに追加されない場合、iframe 内のドキュメントは初期化されません。したがって、最初のコードでは、取得した ifr 変数の contentDocument 値は null です。これは、iframe 内のドキュメントが現時点では初期化されていないことを意味します。

この行に続いて、他のノードの初期化ステータスを確認したところ、実際、他の要素ノードが作成されると、それらが DOM ツリーに追加されるかどうかに関係なく、独自の属性とメソッドを持つことがわかりました。ない。言い換えれば、iframe は多くの要素ノードの中で外れ値です。