iframeタグは、Webページに組み込みフレームを作成できます。これは、SRC属性を指定して別のWebページドキュメントのコンテンツを呼び出すことができます。フレームセットと同様に、Webページの構造を分割してWebページの一部をパブリックに保つために使用されますが、FramesetのFramework構造がWebページ全体を分割するのと比較して、Iframesはより柔軟で、Webページのどこにでも埋め込むことができます。 IFRAME使用のこの機能により、一部のWebページで広く使用されているため、不適切な虐待にもつながりました。 Web Designは、iFrame Web要素を使用するいくつかの一般的な方法を分析します。
- データの非同期交換のソリューションとして、更新されない応答ページコンポーネントを作成します。これは、初期にAJAXを使用せずに非同期にリクエストを送信する代替方法です。ページにInvisible Iframe要素を設定し、そのSRC属性をリクエストの送信する必要があるページアドレスに指している場合、リクエストを送信できます。同じドメインでは、データを取得するために返されたページをDOM解析できます。もう1つの利点は、AJAXのサンドボックスセキュリティモデルをバイパスし、データを取得するためにクロスドメイン要求を正常に送信できることですが、この場合、IFRAMEのドキュメントオブジェクトを取得できません。その特徴のため、ドメインクロスリクエストを必要とする一部のWebページにまだ適用できます。この種の更新は、データ交換プロセス中に親ページが更新せず、ユーザー操作に応答し続けることを意味します。実際のデータ交換は、親ページに埋め込まれたiframeページによってロックされています。この埋め込まれたiframeページは、必要に応じて表示または見えないように設定でき、親ページの他の要素の応答にユーザーへの応答に影響しません。この効果は、Ajaxのリフレッシュフリーに似ていますが、そのメカニズムが完全に異なることがわかります。 GmailはAJAXアプリケーションのモデルですが、多くのIFRAMEを組み合わせて、優れたパフォーマンスとユーザーエクスペリエンスを実現します。
- ページを最適化する方法。 IFRAMEを使用してスクリプトを並行してロードして、アイコンや広告などのスローロードサードパーティコンテンツのロード問題を解決します。 Googleの広告プラットフォームAdSenseは、IFRAMEを使用してユーザーのWebサイトで収益を共有することを意味します。また、国内ポータルのホームページで広告コードを表示および分析することで、この種のテクノロジーを見ることができます。また、ネットワークが低いネットワーク圧力にさらされているときに、隠されたiframeを使用して大きなファイルをプリロードしてキャッシュすることもできます。これにより、他のページが使用できます。プリロードの概念は、GoogleホームページのFireBugを使用して分析できます。あなたはボディタグで見ることができます：
onload = document.fqfocus（）; if（document.images）new image（）。src = '/images/nav_logo4.png'
このようなコードを使用すると、ロードされた画像nav_logo4.pngはホームページでは使用されませんが、検索結果リストなどの他のページでこの画像を使用する場合、キャッシュから読むだけで、再度ダウンロードする必要はありません。
- IE6ブラウザの浮動層のハック方法として、選択したコントロールとフラッシュ要素をブロックします。 Web2.0 ERAでは、Lightbox（またはThickbox）テクノロジーは、その優れた経験と新鮮な視覚体験により、一般的な効果となっています。このテクノロジーは、実際には絶対に配置されたフローティングレイヤーを使用して元のページをカバーしてテキスト情報、写真、フォーム、またはその他の任意のページ要素を提示し、ブラウザのウィンドウまたはブラウザの独自のメッセージや入力コントロールがユーザーと対話するために使用されることが多い初期のWeb開発の方法を置き換えます。古い方法では、新しいウィンドウをポップアップするスクリプトは、ブラウザの広告ブロッキングシステムによって傍受されることがよくあり、ブラウザのメッセージコントロールはユーザーエクスペリエンスの研究者によって批判され、ブラウザのプロセスを中断し、ページ全体やその他のWebページが複数のタグをロックされていることになります。自分自身に厳格な要件を備えたフロントラインのWebフロントエンド開発者として、ライトボックス効果を実装するプロセスでこの問題に間違いなく遭遇します。絶対的な位置決め層は、IE6のSelectコントロールをカバーし、Webページでフラッシュすることはできません。また、スタイルがより高いZ-Index値に設定されていても、役に立たないでしょう。これは、選択要素がIE6のフォームレベル要素であり、その優先度が他のすべてのHTMLタグよりもはるかに高いためです。同じフォームレベルのiframesのみをカバーできます。したがって、開発者は、浮動層をiframeに入れたり、浮動層にiframeを配置することでこの問題を解決できることを発見しました。幸いなことに、この問題はIE6後のIEアップグレードバージョンで修正されていますが、IE6の場合、50％以上の市場シェア（出版時の統計）がまだあるため、このソリューションはまだ実用的な意味があります。
上記の3つのアプリケーションに加えて、一部の不適切なアプリケーションもIFRAME要素にも一般的です。たとえば、ページにあまりにも多くのiframeフレームを埋め込み、フレームの外側のリンクタグのターゲット属性を指定してクリックしたときにiframeを更新します。この使用法はフレームセットに似ており、ナビゲーションを共有する目的を達成します。当初の意図は良いですが、不利な点については疑いの余地はありません。これにより、ページのリクエストが多すぎます。上記の記事「Webサイトをスピードアップするためのベストプラクティス」は、ページを最適化するにはiFramesの数を最小限に抑える必要があることを明確に述べており、3つの欠点を要約しています。
- コンテンツが空であっても、リソースの損失（クライアントとサーバーを含む）を引き起こします。
- ブロックページオンロードイベントトリガー（ブロックページオンロード、およびページが読み込まれないように翻訳されています。ここには疑問があります）
- セマンティクスはありません（SEOはウェブサイトマーケティングの重要な部分です）
XHTML1.0のHTML5の次のバージョンでは、Webページの可用性にマイナスの影響があるため、フレームセットタグのサポートはありません。これは、サイドからのいくつかの問題も説明しています。
さらに、埋め込まれたiframeは内部コンテンツサイズに自動的に適応できないため、ページディスプレイの整合性を維持するために、iframeコンテンツの変更に応じて即座にサイズを調整するためにJavaScriptスクリプトを記述する必要もあります。 JavaScriptスクリプトが修正する必要性と相まって、複数の散乱要求は、複数のIFRAMEページを実行しているリスクを高めます。それで、いくつかのページコンテンツを公開する良い方法はありますか？サーバー側は、長い間ソリューションを提供してくれました。 ASPに含まれるものとPHPの要求方法はすべて、プログラムに既存のコードを含めるために使用されます。これにより、ページの特定の部分（ナビゲーションメニュー、フッターなど）を公開することもできます。ただし、実行後、完全なページとして出力され、クライアントリクエストを効果的に削減し、IFRAMEの高い適応性の問題はありません。
