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

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を使用しない理由の分析

推薦する

Vue3 ベースのスクリプト設定構文 $refs の使用

目次1. Vue2 構文2. Vue3の使用1. コンポーネントのref値を設定する2. コンポーネ...

2つのウェブサイトページ翻訳プラグインの共有

TranslateThis URL: http://translateth.is Google 翻訳...

MySQL の高可用性アーキテクチャの完全な説明: MHA アーキテクチャ

目次1. はじめに2. 構成3. 作業プロセス4. 建築5. 表示例MHA (Master HA) ...

CocosCreatorでJSZip圧縮を使用する方法

CocosCreator バージョン: 2.4.2 jszipの実践的なプロジェクトアプリケーション...

MySQLは遅いSQLを開始し、原因を分析します

ステップ1. MySQLスロークエリを有効にする方法1: 設定ファイルを変更するWindows: W...

ApacheBench でマルチ URL をサポートする方法

標準の ab は単一の URI でのストレス テストのみをサポートしており、実際のニーズを満たしてい...

Dockerはブリッジを追加し、IPアドレスの範囲を設定します

バイナリ docker 19.03 バージョンがインストール後に docker0 ブリッジを自動的に...

HTML テーブルの行間隔を変更する方法の例

HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...

vue+openlayer をベースにマップの集約と散乱効果を実現

目次序文:結果: 1.重合効果: 2. 散布効果:具体的な実装手順: 1. プロジェクトにOpenL...

ウェブサイトに最も必要なのは、ターゲットユーザーグループのエクスペリエンスを向上させることです。

「大河は東に流れ、波は歴代の英雄たちを洗い流した。古城の西側は三国時代の周朗の赤壁だと言われている...

WeChatアプレットの手動および自動追跡の実装の詳細説明(Taro)

どの企業もユーザーベースを拡大したいのであれば、ユーザーの操作データを収集・分析する必要があり、その...

React 高階コンポーネント HOC 使用方法の概要

HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...

CentOS の環境変数と設定ファイルの詳細な説明

序文CentOS 環境変数設定ファイル システムは階層型システムであり、他のマルチユーザー アプリケ...