あるコンテナ内のリンクをクリックし、別のコンテナにコンテンツを表示するというタスクが必要になる場合があります。 HTML では、iframe を使用して、ページ上の指定された領域にコンテンツを簡単に表示します。この記事では、2 つの異なる例を使用して、リンクを使用して別の iframe リンクを介して iframe をロードします。例 1 では、上の iframe のリンクを使用して、下の iframe に 2 つの異なる画像が表示されます。例 2 では、上部の iframe のリンクを使用して、ビデオ コンテンツが下部の iframe と上部の iframe の両方に表示されます。

例 1: 上部の Iframe で 2 つのテキスト リンクを使用して、下部の Iframe の画像コンテンツを表示および変更します

フォルダーとページのデザイン手順-

ステップ1-2つのファイルiFrameFile1.htmlとiFrameFile2.htmlを作成します。

ステップ 2- iFrameFile1.html に HTML コードを記述し、このファイル内に iframeUpper および iframeBottom という名前の 2 つの iFrame を作成します。

ステップ 3- iframeBottom を空のままにして、iframeUpper 内から iFrameFile2.html ファイルをロードします。

ステップ 4- iFrameFile2.html に HTML コードを記述し、このファイルに 2 つのタグを作成します

ステップ 5- href と画像ファイルのファイル名への相対パスまたは絶対パスを使用し、タグで target="iframeBottom"

を使用します。

ステップ 6- ブラウザで iFrameFile1.html を開きます。リンクは上の iframe に表示されます。リンクを 1 つずつクリックすると、下部の iframe 内の画像ファイルの内容が変化することがわかります。

この例では次のファイルが使用されます

ファイル1- iFrameFile1.html

ファイル 2- iFrameFile2.html

ファイル 3−birdalone.jpg

ファイル 4−bird.jpg

Code For iFrameFile1.html

の中国語翻訳は次のとおりです:

Code For iFrameFile1.html

リーリー

iFrameFile2.html コード

リーリー

結果の表示 - 例 1

結果を確認するには、ブラウザで iFrameFile1.html を開きます。リンクをクリックして結果を確認してください。

例 2: 上部 Iframe のテキスト リンクを使用して、下部 Iframe と上部 Iframe にビデオ コンテンツを表示する

フォルダーとページのデザイン手順-

ステップ 1- 2 つのファイル iFrameFile11.html と iFrameFile22.html を作成します。

ステップ 2- iFrameFile11.html に HTML コードを記述し、ファイル内に iframeUpper および iframeBottom という名前の 2 つの iFrame を作成します。

ステップ 3- iframeBottom を空のままにして、iframeUpper 内から iFrameFile22.html ファイルをロードします。

ステップ 4- iFrameFile22.html に HTML コードを記述し、このファイルに 2 つのタグ

を作成します。

ステップ 5-タグで動画ファイルの相対パスまたは絶対パスとファイル名とともに href を使用し、1 つのタグで target="iframeBottom" を使用し、別の target= を使用します。タグ内の _self

ステップ 6- ブラウザで iFrameFile11.html を開きます。リンクは上の iFrame に表示されます。リンクをクリックしてビデオ ファイルの内容を表示します。まずコンテンツは下部の iFrame に表示され、次に同じ上部の iFrame に表示されます。

この例では次のファイルが使用されます

ファイル1- iFrameFile11.html

ファイル 2- iFrameFile22.html

ファイル 3- Birdvideo.mp4

iFrameFile11.html コード:

リーリー

Code For iFrameFile22.html

の中国語翻訳は次のとおりです:

Code For iFrameFile22.html

リーリー

結果の表示 - 例 2:

結果を確認するには、ブラウザで iFrameFile11.html を開きます。リンクをクリックして結果を確認してください。

この HTML Iframe と a-href の記事では、2 つの異なる例を使用して、最初の Iframe 内のリンクをクリックして 2 番目の Iframe にコンテンツを表示する方法を示します。 2 番目の例では、同じ Iframe 内のコンテンツを表示する方法も示しています。最初の例では画像ファイルを使用し、2 番目の例ではビデオ表示例を使用します。

以上がある iframe から別の iframe にハイパーリンクをロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。