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 スティッキーフッターのいくつかの実装

推薦する

Dockerプライベートウェアハウスの構築とインターフェース管理の詳細な説明

1. レジストリについて公式 Docker ハブは、パブリックイメージを管理するのに適した場所です。...

IDEA で Linux コマンドを使用する方法

Windows システムと比較して、Linux システムは多数の豊富なコマンドライン ツールを提供し...

MySQL 5.7 における部分テーブルのデュアルマスター同期の実装プロセスの詳細な説明

序文最近、私はある要件に遭遇しました。会社の業務上、2 つのデータベース間の一部のテーブルは、リアル...

Lua モジュールを使用して WAF を実装する Nginx の原理の分析

目次1. WAFの背景2. WAFとは3. 動作原理4. WAF機能5. WAFと従来のファイアウォ...

MySQL 5.7.21 のインストールと設定のチュートリアル

mysql5.7.21の簡単なインストール構成は次のとおりです。 1. MySQLのインストール1....

Zookeeper 不正アクセス テストの問題

目次序文Zookeeper サービスのオープンを検出情報を入手する接続テスト接続先修理計画参照する序...

体験をデザインする: ボタンには何があるか

<br />最近、UCDChina は「インターフェース上のテキストに注意を払う」という...

Linux でのソース パッケージ インストールのサービス管理

目次1. ソースパッケージサービスの起動管理2. ソースパッケージサービスのセルフスタート管理3. ...

フロントエンドとバックエンド分離プロジェクトのDockerデプロイメントの実装例

目次1. 環境整備2. イメージを実行する問題を解決するRedis のインストールNginx のイン...

Linux の daily_routine サンプルコードの詳細な説明

まずサンプルコードを見てみましょう: #/bin/bash cal 日付 -u echo "...

JS の 3 つの主要な問題、非同期性とシングルスレッドについて簡単に説明します。

目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...

CSS属性のマージンの理解について話す

1.マージンとは何ですか?マージンは、要素の周囲のスペースの間隔を制御するために使用され、視覚的にス...

WeChat アプレット wxs 日付と時刻処理の実装例

目次1. 日付までのタイムスタンプ2. UTCを北京時間に変換するWXS (WeiXin Scrip...

Docker を使用した nGrinder パフォーマンス テスト プラットフォームの導入プロセスの分析

nGrinderとは何ですか? nGrinder は、スクリプトの作成、テストの実行、監視、結果レポ...