Webフロントエンド開発では、IFRAMEコントロールを使用します。
ただし、内部および外部のインタラクションを制御する場合、各ブラウザで使用されるキーワードはしばしば異なりますが、これは非常に面倒です。サブイフレームでウィンドウオブジェクトを取得するために、各ブラウザには独自の仕様があり、一部はウィンドウ、一部はコンテンツワインドなどです。
ただし、子ページから親レイヤーページにアクセスするだけで、元の形式では、誰もがwindow.parentです。
次に、この機能を介して、自分のウィンドウオブジェクトをChildページの親ページに渡すことができます。これにより、親ページがChildページに簡単にアクセスできるようになり、Iframeオブジェクトからウィンドウオブジェクトを取得する方法を心配する必要がなくなります。
一言も言わずに、最初にコードを見てみましょう。
親ページコード:
window.iframewindow = null; function frameready(subwindow){window.iframewindow = subwindow; //割り当て}; <iframe src = "xx"> </iframe>サブページコード:
$(function(){window.parent.frameready(window);});上記の簡単なコードを介して、親ページのiframeWindowオブジェクトにアクセスし、子ページのウィンドウオブジェクトを直接取得できます。
複数のiframesがある場合はどうなりますか?
この状況はもう少し複雑になりますが、それは問題ではありません。上記のソリューションを引き続き使用したいので、現在の状況を分析しましょう。
1.すべてのサブページのウィンドウオブジェクトを管理するために、iframeWindowsに似たコレクションオブジェクトが必要です。
2。各子供ページがparent.framereadyを呼び出す場合、親ページの各iframeに正確にアクセスできるように、親ページの一意の名前に依存する必要があります。
それから今は簡単です。サブページがする必要があるのは、名前、番号などにすぎないことです。コードを見てみましょう
window.subwindowname = "helloworldwindow"; $(function(){window.parent.frameready(window.subwindowname、window);});その後、親ページがしなければならないことは、framereadyをリファクタリングしてパラメーターを追加することです
window.iframewindows = {}; //これはオブジェクト関数になりますframeready(name、window){window.iframewindows [name] = window;}; function getsubwindow(name){return window.iframewindows [name];}要約:
このスキームで構築されたページには、次の利点があります。
1.親ページの相互作用は、親キーワードのみに依存します(そして、以前の方法では、親だけでなく、ContentWindow、ウィンドウ、その他の不確実なキーワードにも依存します。最も重要なことは、親のサポートがまだ非常に良いことです)
2。統一されたウィンドウオブジェクト、使用するたびに要求された参照チェーンを削減し、動作速度を改善する
3。最も重要な点:コードの書き込みがはるかに簡単であるということです。
上記は、JavaScriptのIFRAME相互作用と、エディターが導入したさまざまなブラウザとの互換性のソリューションです。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!