HTML フレーム、Iframe、フレームセットの違い

HTML フレーム、Iframe、フレームセットの違い

10.4.1 フレームセットとフレームの違い まず、フレームセットとフレームの違いについて説明します。

<Frameset></Frameset> はフレームを分割するために使用され、各フレームは <Frame></Frame> でマークされます。 <Frame></Frame> は <Frameset></Frameset> 内で使用する必要があります。コードは次のとおりです。

<FRAMESET border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>

<FRAME src="inc/admin_left.htm" name=left scrolling=no id="left">

<FRAME src="inc/admin_center.htm" name=メインスクロール="no">

</フレームセット>

上記の例では、<Frameset></Frameset> によってページが 2 つの部分に分割され、左のフレームのページは admin_left.htm、右のフレームのページは admin_center.htm になります。

注意: <Frame></Frame> タグのフレーム順序は、左から右、または上から下です。

両者の違いは次のとおりです。

● <Frameset> はフレーム タグであり、Web ドキュメントがフレームで構成されていることを示すとともに、ドキュメント内のフレームセットを構成するフレームのレイアウトを設定します。

● <Frame> は、フレームセット内の各フレームのプロパティを設定するために使用されます。

10.4.2 フレームセットパラメータ設定
<Frameset> では、ページ全体のレイアウトを直接決定する特定のパラメータを設定する必要があります。コードは次のとおりです。

<フレームセット border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>

上記コードのパラメータ設定とその意味を表 10.3 に示します。

表10.3 フレームセットパラメータ

パラメータ

例示する

国境

フレームの境界線の太さをピクセル単位で設定します。

フレームボーダー

フレームの境界線を表示するかどうかを設定します。0は表示しない、1は表示することを意味します。

フレーム間隔

フレーム間の距離を示します

境界線の色

フレームの境界線の色を設定する

ドキュメントを上部フレームと下部フレームに分割します。Row の後の値は、数値またはパーセンテージにすることができます。* は、残りのスペースを占有することを意味します。数値の数は、水平に分割されたフレームの数を表します。たとえば、Rows="210,*,10%" は、ページが上部、中央、下部の 3 つのフレームに分割されることを意味します。上部フレームは 210 ピクセルを占め、下部フレームはドキュメント全体の 10% を占め、残りのスペースは中央フレームによって占められます。 * は相対的な概念です。たとえば、Row=* は、ページ内に上下構造を持つフレームレイアウトがないことを意味します。

コル

行と同じ設定

10.4.3 フレームパラメータ設定

フレームパラメータの設定に関しては、コードは次のようになります。

表10.4に示すように。

表10.4 フレームパラメータ

パラメータ

例示する

名前

フレームワークの名前を設定します。英語でなければなりません

ソース

フレーム内に表示されるページパスと名前を設定します。相対パスまたは絶対パスを指定できます。

余白幅

フレームの左端と右端からの距離を示します

マージン高さ

フレームと上端および下端の間の距離を示します

スクロール

フレーム内にスクロールバーを表示するかどうかを設定します。「はい」は表示、「いいえ」は表示しません。「自動」はフレームページの内容がフレームのサイズを超えた場合に自動的にスクロールバーが表示されることを意味します。

フレームボーダー

フレームの境界線を表示するかどうかを設定します。0は表示しない、1は表示することを意味します。

ノーサイズ

ユーザーがフレームのサイズを変更できるかどうかを設定します。このオプションが設定されていない場合、ブラウザはフレームをドラッグしてフレームのサイズを変更できます。

フレーム間隔

フレーム間の距離を示します

境界線の色

フレームの境界線の色を設定する

10.4.4 フレームとIframeの違い

Frame と Iframe が実現できる機能は基本的に同じですが、Iframe の方が Frame よりも柔軟性があります。

フローティング フレーム タグとも呼ばれる Iframe タグは、HTML ドキュメントを HTML ドキュメント内に埋め込んで表示するために使用できます。 Frame タグとの最大の違いは、Web ページに埋め込まれた <Iframe></Iframe> に含まれるコンテンツはページ全体の不可欠な部分であるのに対し、<Frame></Frame> に含まれるコンテンツは独立した個体であり、独立して表示できることです。さらに、Iframe を適用すると、コンテンツのコードを繰り返さずに、同じコンテンツを同じページに複数回表示することもできます。

図 10.21 に示すページでは、ページの上部と下部にページ区切りリンクを作成するために Iframe を使用しています。コードは同じです。コードを繰り返さずに、同じファイルを Web ページに埋め込むだけです。このケースの実際の効果については、付属のブック CD のケース /frame/iframe/see_infomore_iframe.htm を参照してください。

10.4.5 Iframeを透明に設定する

Iframe のもう 1 つの大きな利点は、フレームを透明に設定して、フレーム内の背景をメイン ページの背景と同じにできることです。上記の例では、注意深い読者はこの問題に気付くでしょう。以下は、Iframe を透明に設定する方法の詳細な説明です。具体的な手順は次のとおりです。

(1)CD-ROM内のサンプルファイル/frame/iframe/see_infomore_iframe1.htmを開きます。

(2)ブラウザでページファイルを閲覧すると、Iframeが挿入された領域で元のセルの背景が覆われていることがわかります。これは望ましい効果ではありません。

(3)page.htmページを開き、コードビューに切り替えて、<body>タグに次のコードを挿入します。

<body style="background-color=transparent">

図10.21 Iframeを使用してページめくりを作成する

(4) see_infomore_iframe1.htm をコードビューに切り替えて、次のようにページに Iframe を挿入するセルのコードを確認します。

<td 高さ="30" 列スパン="4" >

<iframe name="main" width="100%" height="30" frameborder="0" border=0 scrolling="no" marginwidth="0" marginheight="0" src="page.htm"></iframe>

</td>

(5)<Iframe>タグ内で、

<frame name="left" src=" index_manager/admin_left.htm " marginwidth="1" marginheight="1" scrolling="no" frameborder="1" noresize framespacing="2" bordercolor="#cc0000">

上記コードのパラメータ設定とその意味

透明度を許可="true"

(6)Iframeを挿入するためのセルコードは次のとおりです。

<td 高さ="30" 列スパン="4" >

<iframe name="main" width="100%" height="30" frameborder="0" border=0 scrolling="no" marginwidth="0" marginheight="0" src="page.htm" allowTransparency="true"></iframe></td>

(7)page.htmとsee_infomore_iframe1.htmの2つのページを保存し、ブラウザで結果を参照します。

<<:  JavaScript配列の一般的なメソッドの概要

>>:  CSS スティッキーフッターのいくつかの実装

推薦する

NodeJs の高メモリ使用量のトラブルシューティング実戦記録

序文これは、オンライン コンテナーの拡張によって発生した調査です。最終的には、実際の OOM が原因...

実践で遭遇するフロントエンドの基本(HTML、CSS)

1. div css マウスの手の形は cursor:pointer; です。 2. HTML の相...

Vue 天気予報入門

この記事では、参考までに天気予報を実装するためのVueの具体的なコードを紹介します。具体的な内容は次...

URL を入力すると、バックグラウンドでは具体的に何が起こるのでしょうか?

ソフトウェア開発者は、ネットワーク アプリケーションがどのように動作するかを階層的に完全に理解してい...

CentOS7 は yum を使用して mysql 8.0.12 をインストールします

この記事では、centos7にyumを使用してMySQL 8.0.12をインストールする詳細な手順を...

MySQL 8.0.15 圧縮版インストール グラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15圧縮版のインストール方法を紹介します。具体的な内容は...

ネイティブJSでマウススライドによる愛の拡散効果を実現

この記事では、マウスをスライドすると愛が広がる js 特殊効果を紹介します。効果は次のとおりです。 ...

Vueプロジェクトはログインと登録の効果を実現します

この記事の例では、ログインと登録の効果を実現するためのvueプロジェクトの具体的なコードを共有してい...

MySQL (5.6 以下) の JSON 解析の詳細な例

MySQL(5.6以下)はjsonを解析します #json 解析関数 DELIMITER $$ `j...

docker-maven-pluginを使用してデプロイメントを自動化する方法を説明します

1. docker-maven-pluginの紹介私たちの継続的インテグレーションプロセスでは、プロ...

Docker コンテナを他のサーバーに移行する 5 つの方法

多くの場合、移行は避けられません。ハードウェアのアップグレード、データ センターの変更、古いオペレー...

ウェブ上の模倣と盗作に関する議論

2005年に業界に入ってから数か月後、労働者の日休みの期間中、1か月以上毎日12時まで残業をしました...

jQueryカルーセル機能を実装する方法

この記事では、jQueryカルーセル機能の実装コードを参考までに共有します。具体的な内容は次のとおり...

MySQL 5.7 データベースのインストール手順の個人的な要約

1.mysql-5.7.19-winx64.zip(これは無料のインストールバージョンで、約318 ...