ホームページ > 記事 > ウェブフロントエンド > iframe ノードの初期化

iframe ノードの初期化

php中世界最好的语言オリジナル: 2018-02-06 10:20:452749ブラウズ

今回は iframe のノード初期化について説明します。iframe ノードの初期化の注意事項は何ですか?実際のケースを見てみましょう。

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

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

上のコードを見てください、何か間違いを見つけましたか?
私と同じような経験をした子供たちの靴がなければ、おそらくこのコードの何が間違っているのか理解できないと思います。だから、走ってみるのもいいかもしれません。問題はすぐに見つかるかもしれません。
以下に答えを明らかにしましょう:
このコードは、オブジェクトが見つからないという例外をスローします。見つからないオブジェクトはどれですか?ドキュメントオブジェクトが見つかりません。何ですか?ドキュメントオブジェクトが見つからないということはどのようにして起こり得るのでしょうか?もちろん、このドキュメントオブジェクトは iframe のドキュメントオブジェクトです。リッチテキストを作成したことがある人なら、編集可能にする前に、まず iframe のドキュメントオブジェクトを取得する必要があることを知っています。しかし、なぜドキュメントオブジェクトを取得できないのでしょうか?ここではあまり大げさなことはしません。私の解決プロセスについて話しましょう。
まず、Googleで調べたところ、書類の入手方法は正しかったことが分かりました。じゃあChromeだったのかな？ Chrome はこれら 2 つのオブジェクトをサポートしていませんか?そこでFirefoxに切り替えました。結果は依然として同じです。その場合、確かなことは、それはあなた自身のコードに問題があるに違いないということです。
その後、インターネット上のコードを比較して、appendChild の位置が少し間違っていることがわかったので、事前に移動してドキュメントオブジェクトを取得しました。

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

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

上のコードを見て、何か間違いを見つけましたか?
私と同じような経験をした子供たちの靴がなければ、おそらくこのコードの何が間違っているのか理解できないと思います。だから、走ってみるのもいいかもしれません。問題はすぐに見つかるかもしれません。
以下に答えを明らかにしましょう:
このコードは、オブジェクトが見つからないという例外をスローします。見つからないオブジェクトはどれですか?ドキュメントオブジェクトが見つかりません。何ですか?ドキュメントオブジェクトが見つからないということはどのようにして起こり得るのでしょうか?もちろん、このドキュメントオブジェクトは iframe のドキュメントオブジェクトです。リッチテキストを作成したことがある人なら、編集可能にする前に、まず iframe のドキュメントオブジェクトを取得する必要があることを知っています。しかし、なぜドキュメントオブジェクトを取得できないのでしょうか?ここではあまり大げさなことはしません。私の解決プロセスについて話しましょう。
まず、Googleで調べたところ、書類の入手方法は正しかったことがわかりました。じゃあChromeだったのかな？ Chrome はこれら 2 つのオブジェクトをサポートしていませんか?そこでFirefoxに切り替えました。結果は依然として同じです。その場合、確かなことは、それはあなた自身のコードに問題があるに違いないということです。
後でインターネット上のコードを比較すると、appendChild の位置が少し間違っていることがわかったので、ドキュメントオブジェクトを取得するために事前に移動しておきました。

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 には実際には別のドキュメントが含まれており、このドキュメントは初期化された後にのみドキュメントオブジェクトを持つことができることは誰もが知っています。また、iframe 要素が DOM ツリーに追加されない場合、iframe 内のドキュメントは初期化されません。したがって、最初のコードでは、取得した ifr 変数の contentDocument 値は null です。これは、iframe 内のドキュメントが現時点では初期化されていないことを意味します。

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

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

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

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。