iframeノードの初期化の問題に関する議論

今日、ふとリッチテキストエディタの制作原理を見直してみようと思いました。それで、彼は何も言わずにそれをやり始めました。 1 年前にシンプルなリッチテキストエディターを作成したので、その印象がまだ残っています。しかし、書いたコードを実行すると、問題が見つかりました。

コードをコピー

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

var ifr = document.createElement('iframe');
幅 = 300;
ifr.高さ = 300;
var idoc = ifr.contentDocument || ifr.contentWindow.document;
idoc.designMode = 'オン';
コンテンツ編集可能 = true;
idoc.write('<html><head><style>body{ margin:0px; }</style></head><body></body></html>');
ドキュメント本体に子要素を追加します(ifr);

上記のコードを見て、何か抜けているところを見つけましたか?

私と同じような経験をした友人がいなかったら、おそらくこのコードの何が間違っているのか分からないと思います。それなら、走りに行ってみたらいいでしょう。すぐに問題が見つかるかもしれません。

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

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

まず Google にアクセスして、文書の入手方法が正しいことを確認しました。それで、それは Chrome のせいなのかなと思いました。 Chrome がこれら 2 つのオブジェクトをサポートしていない可能性はありますか?そこでFirefoxに切り替えました。結果は同じです。そうすると、問題はあなた自身のコードにあることは間違いありません。

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

コードをコピー

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

var ifr = document.createElement('iframe');
幅 = 300;
ifr.高さ = 300;
ドキュメント本体に子要素を追加します(ifr);
var idoc = ifr.contentDocument || ifr.contentWindow.document;
idoc.designMode = 'オン';
コンテンツ編集可能 = true;
idoc.write('<html><head><style>body{ margin:3px; word-wrap:break-word; word-break: break-all; }</style></head><body></body></html>');

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

この行に従って、他のノードの初期化をチェックしたところ、他の要素ノードが作成されると、DOM ツリーに追加されるかどうかに関係なく、独自のプロパティとメソッドを持つことがわかりました。つまり、iframe は多くの要素ノードの中で外れ値です。

<<: CSS3 カスタムスクロールバースタイル::webkit-scrollbar サンプルコード詳細説明

>>: MySQLフィールド定義でnullを使用しない理由の分析