HTML の iframe と frame の違いを例を使って説明します

HTML の iframe と frame の違いを例を使って説明します

プロジェクトで frameset 属性を使用したことがあるかどうかはわかりません。昨年、オンライン カスタマー サービス システムの制作で frameset 属性を使用しました。カスタマー サービス システムでは、上部に 1 つのピース、下部に 1 つのピースなど、固定レイアウトが必要なため、そのときは frameset と frame を使用しました。これらの属性をいろいろ試してみた後、iframe と frame の違いがわかりました。これまでは、プロジェクトでフレームを使用することはほとんどなく、使用する場合は iframe を使用していました。

具体的な違いについては以下で説明しましょう。まとめると以下の通りです。

1. Frame は frameSet なしでは単独では使用できませんが、iframe は使用できます。

2. フレームを本体内に配置できない。

正常に表示されるのは以下のとおりです。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!--<本文>-->     
  2. <フレームセット = "50%、*" >     
  3.     <フレーム   名前= "フレーム1"     src = "test1.htm" />      
  4.     <フレーム   名前= "フレーム2"     src = "test2.htm" />      
  5. </フレームセット>     
  6. <!--<本文>-->    

以下は正常に表示できません:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <本文>     
  2. <フレームセット = "50%、*" >     
  3.     <フレーム   名前= "フレーム1"     src = "test1.htm" />      
  4.     <フレーム   名前= "フレーム2"     src = "test2.htm" />      
  5. </フレームセット>     
  6. <本文>    

逆に、iframeがframeSet属性の下に配置されている場合は、本文に配置する必要があります。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <本文>     
  2.    <フレームセット>      
  3.      <インラインフレーム   名前= "フレーム1"     src = "test1.htm" />      
  4.      <インラインフレーム   名前= "フレーム2"     src = "test2.htm" />      
  5.    </フレームセット>      
  6. </本文>    

3. iframe は HTML タグであり、HTML 内のどこでも使用できますが、frame は使用できません。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <本文>     
  2.     <インラインフレーム   名前= "フレーム1"     src = "test1.htm" />      
  3.     <インラインフレーム   名前= "フレーム2"     src = "test2.htm" />      
  4. </本文>   
  5.   
  6. <>     
  7. < tr >     
  8. < td > < iframe   id = ""   src = "" > </ iframe > </ td > < td > </ td >     
  9. </tr>     
  10. </>    

フレームは frameSet 内にネストする必要があり、table などのタグでは使用できません。

4. フレームの高さはframeSetによってのみ制御できます。iframeはframeSetではなく、それ自体で制御できます。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!--<本文>-->     
  2. <フレームセット = "50%、*" >     
  3.     <フレーム   名前= "フレーム1"     src = "test1.htm" />      
  4.     <フレーム   名前= "フレーム2"     src = "test2.htm" />      
  5. </フレームセット>     
  6. <!--</body>-->     
  7.   
  8. <本文>     
  9. <フレームセット>     
  10.     <インラインフレーム 高さ= "30%"   名前= "フレーム1"     src = "test1.htm" />      
  11.     <インラインフレーム 高さ= "100"   名前= "フレーム2"     src = "test2.htm" />      
  12. </フレームセット>     
  13. </本文>    

5. 同じページで 2 つ以上の iframe が使用されている場合、IE では正常に表示されますが、Firefox では最初の 1 つしか表示されません。2 つ以上のフレームを使用すると、IE と Firefox の両方で正常に動作します。

<<:  vue3 コンポーネント通信方法の概要と例

>>:  他の人が私のウェブページを保存したり、サイトをコピーしたりするのを防ぐためのヒント

推薦する

ストリーマーボタンの効果を実現するCSS3アニメーション

CSS3 を学習する過程で、CSS3 属性を使用すると多くのクールな効果を簡単に実現できることが分か...

MySQL複合インデックスの概要

目次1. 背景2. 複合インデックスを理解する3. 左端一致原則4. フィールド順序の影響5. 単一...

Ubuntu Linuxシステムをインストールするときにハードディスクをパーティション分割する最も合理的な方法の詳細な説明

Windows または Linux オペレーティング システムをインストールするかどうかに関係なく、...

MySQL エラー: 接続数が多すぎる場合の解決策

MySQLデータベースの接続が多すぎますこのエラーは明らかに、mysql_connect の後に m...

Alibaba Cloud Centos7のインストールとSVNの設定

1. SVNサーバーをインストールする yum でサブバージョンをインストール2. SVNバージョン...

MySQL でのデータベース間クエリの例

序文MySQL では、クロスデータベース クエリは主に 2 つの状況に分けられます。1 つは同じサー...

MySQL方言の簡単な紹介

データベースはさておき、人生における方言とは何でしょうか?方言とは、ある場所特有の言語です。他の場所...

Vueカスタム指示により、ポップアップウィンドウのドラッグ4辺ストレッチと対角ストレッチ効果を実現

導入同社の最近の Vue フロントエンド プロジェクトの要件: ポップアップ ウィンドウのドラッグ、...

Linux ハードウェア構成コマンドの例

ハードウェア ビュー コマンドシステム # uname -a # カーネル/オペレーティング システ...

CSS スタイルで一般的なグラフィック効果を示すサンプルコード

一般的な基本グラフィックと私が遭遇するいくつかの小さなアイコンについて簡単に説明します。以下は CS...

DockerにElasticsearch7.6クラスタをインストールしてパスワードを設定する方法

目次基本的な設定バージョンとDockerイメージについて始めるelasticsearch.ymlにつ...

Vueはログインタイプの切り替えを実装します

この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...

ライフゲームの JavaScript 実装

目次コンセプト紹介論理的ルール完全なコード主な実装コンセプト紹介セルオートマトンとは、コンピュータの...

MySql 認証に基づく vsftpd 仮想ユーザー

目次1. MySQLのインストール1.2 テーブル、データベース、ユーザーを作成する1.3 リモート...

Docker 環境で JMeter+Grafana+influxdb ビジュアル パフォーマンス監視プラットフォームを構築するチュートリアル

目次1. Dockerをインストールする2. influxDBをインストールして設定する3. Gra...