今日、ふとリッチテキストエディタの制作原理を見直してみようと思いました。それで、彼は何も言わずにそれをやり始めました。 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を使用しない理由の分析
目次1. Vue2 構文2. Vue3の使用1. コンポーネントのref値を設定する2. コンポーネ...
TranslateThis URL: http://translateth.is Google 翻訳...
win10 + Ubuntu 20.04 LTS デュアルシステムインストール (UEFI + GP...
目次1. はじめに2. 構成3. 作業プロセス4. 建築5. 表示例MHA (Master HA) ...
CocosCreator バージョン: 2.4.2 jszipの実践的なプロジェクトアプリケーション...
ステップ1. MySQLスロークエリを有効にする方法1: 設定ファイルを変更するWindows: W...
標準の ab は単一の URI でのストレス テストのみをサポートしており、実際のニーズを満たしてい...
バイナリ docker 19.03 バージョンがインストール後に docker0 ブリッジを自動的に...
HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...
目次序文:結果: 1.重合効果: 2. 散布効果:具体的な実装手順: 1. プロジェクトにOpenL...
「大河は東に流れ、波は歴代の英雄たちを洗い流した。古城の西側は三国時代の周朗の赤壁だと言われている...
どの企業もユーザーベースを拡大したいのであれば、ユーザーの操作データを収集・分析する必要があり、その...
HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...
MySQL をインストールした後、初めてmysql -uroot -pを実行したときに、root パ...
序文CentOS 環境変数設定ファイル システムは階層型システムであり、他のマルチユーザー アプリケ...