HTML iframe と frameset の違い_PowerNode Java Academy

HTML iframe と frameset の違い_PowerNode Java Academy

導入

1.<iframe> タグ: iframe は、ページ内に内部フレームを生成するインライン フレームです。

2. <frameset> タグ: frameset は、それぞれ独立したドキュメントを持つ複数のサブフレームを含むフレーム セットを定義します。

<iframe> タグ

iframe は、ページ内に内部フレームを生成するインライン フレームです。

<iframe></iframe>

財産

frameborder{int}: フレームの境界線を表示するかどうか。

src{URL}: リソース(Web ページや画像など)の URI を指定します。

scrolling{boolean}: フレームのスクロールバーを表示するかどうか。

width{int}: iframe の幅を定義します。

height{int}: iframe の高さを定義します。

<本文>
<h3>HTML タグのデモンストレーション</h3>
<iframe src=1.1-ShowHtml.htm ></iframe>
</本文> 

予防

「<iframe>I am content</iframe>」内にコンテンツを追加した場合、表示ページには追加したコンテンツが表示されません。そこで、src 属性を使用してページを指定してみましょう。

アプリケーションシナリオ

1) バージョンアップページで、バージョンログが多すぎる場合は、アップグレード情報を iframe 内に配置できます。

2) Blog Garden の [新しいエッセイ] 領域のようなリッチ テキスト編集ボックス。

<frameset> タグ

フレームセットは、それぞれが独立したドキュメントを持つ複数のフレームを含むフレーム セットを定義します。

形式

<フレームセット>
  <フレーム src=a.htm />
  <フレーム src=b.htm />
  <noframes></noframes>
</フレームセット>

サブ項目の説明

<framesrc=a.htm />: サブフレーム<noframes></noframes>: ブラウザがこのフレームをサポートしていないときに表示されるコンテンツ。

財産

フレームセット属性:

行: サブフレームが行に配置されていることを示します ( )。 2つのサブフレームを例に挙げます。rows="30%,*" は最初のフレームがページ全体の高さの30%を占め、2番目のフレームが残りの部分を占めることを意味します。cols: はサブフレームが列に配置されることを意味します ( )。 2 つのサブフレームを例に挙げます。cols="30%,*" は、最初のフレームがページ全体の長さの 30% を占め、2 番目のフレームが残りを占めることを意味します。noresize="noresize" は、サブフレームの範囲が調整されないことを意味します。

フレーム属性:

src: リソース(ページ、画像など)を指す URI。

name: フレーム間の操作を容易にするためにフレームの名前を指定します。

<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
    <title>フレームセットのデモ</title>
</head>
<フレームセット行数="30%,*" noresize="noresize">
    <frame src=DateGrid.htm name="frm1" />
    <frame src=Dialog.htm name="frm2"/>
    <noframes></noframes>
</フレームセット>
</html>

予防

フレームセット タグを使用する場合は、外側の <body></body> タグを必ず削除してください。

サブフレーム間の操作

サンプルコードを参照すると、frm1 は frm2 のサブセットが指すページを変更します: window.parent.frames["frm2"].location.href = 'b.htm'

アプリケーションシナリオ

1) 背景ページの管理、左にメニュー、右のフレームに詳細ページが表示されます。

2) bbs.csdn.netなどの機能メニューページ

クイックファクト

ページ内のフレームを参照しているときに、フレーム ページ内を右クリックすると、追加のフレーム情報が表示されます。

Chrome を例に挙げてみましょう。

<<:  DockerでGDBを使用するときにブレークポイントを入力できない問題を解決する

>>:  MySQL フラッシュリストとダーティページフラッシュメカニズム

推薦する

mybatis-plusページングパラメータが渡された後、SQLのwhere条件にはページング情報操作の制限がありません

2時間近くかけて、さまざまな方法を試しました。後で、whereでフィルタリングした後のデータ量が1ペ...

左右の幅を固定し、中央の幅を適応させたHTMLレイアウトのソリューションの詳細な説明

この記事では、次のように、誰にでも共有できる左右幅固定のミドルアダプティブ HTML レイアウトソリ...

MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要

序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...

ApacheBench でマルチ URL をサポートする方法

標準の ab は単一の URI でのストレス テストのみをサポートしており、実際のニーズを満たしてい...

Layuiはログインインターフェース検証コードを実装します

この記事の例では、ログインインターフェース検証コードを実装するためのlayuiの具体的なコードを参考...

コンテンツの位置をランダムにドラッグするHTMLを実装する2つの方法

テスト: Chrome v80.0.3987.122 は正常です方法は2つあります。通常のラベルの位...

editplus の Zen コーディング例コードの説明

たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...

フロントエンドの状態管理(パート2)

目次1. 再出発1.1. ストア(司書) 1.2. 状態(書籍) 1.3. アクション(図書貸出リス...

Vue3 の動的コンポーネントはどのように機能しますか?

目次1. コンポーネントの登録1.1 グローバル登録1.2 グローバルコンポーネントの登録プロセス1...

MySQLインデックスの詳細な分析

序文インデックスの選択はオプティマイザ段階の作業であることはわかっていますが、オプティマイザは万能で...

フィールドの文字セットの違いによる MySQL のインデックス失敗の解決策

インデックスとは何ですか?なぜインデックスを作成するのですか?インデックスは、列に特定の値を持つ行を...

Apple 電卓の JS 実装

この記事の例では、Appleの電卓を実装するためのJSの具体的なコードを参考までに共有しています。具...

フロントエンド制作に関する簡単な議論: 互換性のために IE6 はまだ必要ですか?

国内市場ではIE6~7のサポートに対する一定の需要がまだありますが、フロントエンド開発者として、私た...

node.js で EventEmitter をカスタマイズする方法

目次序文1. 何ですか2. Node.jsでEventEmitterを使用する方法3. 実施プロセス...