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

推薦する

WeChatアプレットが計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...

Nodejsはgitee実装コードに自動的に同期するドキュメント同期ツールを作成します

本来の意図このツールを作った理由は、コンピューターを使用しているときにいつでも毎日の仕事や生活を記録...

埋め込みJavaScriptと外部リンクの基本的な応用方法

目次埋め込みJavaScriptと外部リンクの基本的な応用JavaScript の記述方法には、イン...

CSS スタイルの優先順位とカスケード順序に関する議論

一般的に: [重要なフラグ1つ] > [特別なフラグ4つ] > 宣言順!importan...

HTML 描画ユーザー登録ページ

この記事では、HTML描画ユーザー登録ページの具体的な実装コードを参考までに共有します。具体的な内容...

CSS の高度な使い方(実戦で活用)

1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...

Docker クロスサーバー通信オーバーレイソリューション (パート 1) Consul 単一インスタンス

目次シナリオタスクアイデア分析するコンセプトと選択ちょっとしたテスト環境説明予防実践テスト引用シナリ...

DIVのぼかし機能を実装する方法

マウスを動かしたときにDIVが消えるように手ぶれ補正を使用するdiv タグ自体は onblur イベ...

VMware Workstation 14 Pro に Win10 システムをインストールする

この記事では、VMware Workstation 14 Proにシステムをインストールする方法を紹...

完全なMySQL学習ノート

目次MyISAM と InnoDBパフォーマンスの低下と SQL の速度低下の理由: MySQL 実...

MySQLの読み書き分離により挿入後にデータが選択されなくなる問題を解決

MySQLは独立した書き込み分離を設定します。コードに次のものを書くと問題が発生する可能性があります...

Javascript での JSBridge に関する予備的研究

目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...

インスタンス化されたオブジェクトパラメータによるMySQLクエリ例の説明

この記事では、オブジェクト パラメータをインスタンス化して MySQL でデータをクエリする方法を紹...

シンプルな HTML ビデオ プレーヤーを実装する方法

この記事では、シンプルな HTML ビデオ プレーヤーを実装する方法を紹介し、皆さんと共有します。詳...

HTML でフレームセット タグを使用するチュートリアル

フレームセット ページは通常の Web ページとは多少異なります。依然として <HTML>...