Heim >Web-Frontend >HTML-Tutorial >Wie lade ich einen Hyperlink von einem Iframe in einen anderen Iframe?

Wie lade ich einen Hyperlink von einem Iframe in einen anderen Iframe?

WBOYnach vorne: 2023-09-07 11:41:14757Durchsuche

Manchmal besteht die Aufgabe darin, in einem Container auf einen Link zu klicken und dann den Inhalt in einem anderen Container anzuzeigen. In HTML werden Iframes verwendet, um Inhalte in einem bestimmten Bereich der Seite einfach anzuzeigen. In diesem Artikel werden anhand von zwei verschiedenen Beispielen Links verwendet, um einen Iframe über einen anderen Iframe-Link zu laden. In Beispiel 1 wird der Link im oberen Iframe verwendet, um zwei verschiedene Bilder im unteren Iframe anzuzeigen. In Beispiel 2 wird über den Link im oberen Iframe der Videoinhalt sowohl im unteren als auch im oberen Iframe angezeigt.

Beispiel 1: Verwenden Sie zwei Textlinks im oberen Iframe, um den Bildinhalt im unteren Iframe anzuzeigen und zu ändern

Schritte zur Ordner- und Seitengestaltung -

Schritt 1 − Erstellen Sie zwei Dateien iFrameFile1.html und iFrameFile2.html.

Schritt 2 – Schreiben Sie HTML-Code in iFrameFile1.html und erstellen Sie in dieser Datei zwei iFrames mit den Namen iframeUpper und iframeBottom.

Schritt 3 – Lassen Sie iframeBottom leer und laden Sie die Datei iFrameFile2.html aus iframeUpper.

Schritt 4 – Schreiben Sie HTML-Code in iFrameFile2.html und erstellen Sie zwei -Tags in dieser Datei

Schritt 5 – Verwenden Sie href und den relativen oder absoluten Pfad zum Dateinamen der Bilddatei und verwenden Sie target="iframeBottom" im

-Tag

Schritt 6 – Öffnen Sie iFrameFile1.html in Ihrem Browser. Der Link wird im Iframe oben angezeigt. Klicken Sie nacheinander auf die Links und Sie können sehen, dass sich der Inhalt der Bilddatei im unteren Iframe ändert.

Die folgenden Dateien werden in diesem Beispiel verwendet

File1 − iFrameFile1.html

Datei 2 - iFrameFile2.html

Datei 3 − Birdalone.jpg

Datei 4 − Bird.jpg

Die chinesische Übersetzung von

Code For iFrameFile1.html

lautet:

Code For iFrameFile1.html

<!DOCTYPE html>
<html>
   <body>
      <center>
         <iframe src=".\iframeFile2.html" 
            name="iframeUpper" 
            width="70%" 
            height="300">
         </iframe>
         <br /><br />
         <iframe src="" 
            name="iframeBottom" 
            width="25%" height="250">
         </iframe>
      </center>
   </body>
</html>

iFrameFile2.html-Code

<!DOCTYPE html>
<html>
   <body>
      <center>
         <h1 style="color: purple">Showing Beautiful Birds</h1>
         <h2 style="color: cyan">You will love this...</h2>
         <h3 style="color: orange">Just click the links</h2>
         <p>
            <a href=
            "./birdalone.jpg" 
            target="iframeBottom" width="25%" height="250" frameborder="1" allowfullscreen="allowfullscreen">The Cuteee Bird</a>
         </p>
         <p>
            <a href=
            "./bird.jpg" 
             target="iframeBottom" width="25%" height="250" frameborder="1" allowfullscreen="allowfullscreen">The Friends Together</a>
         </p>
      </center>
   </body>
</html>

Ergebnisse anzeigen – Beispiel 1

Um die Ergebnisse anzuzeigen, öffnen Sie iFrameFile1.html in Ihrem Browser. Klicken Sie nun auf den Link und überprüfen Sie die Ergebnisse.

Beispiel 2: Verwenden Sie einen Textlink im oberen Iframe, um Videoinhalte im unteren und oberen Iframe anzuzeigen

Schritte zur Ordner- und Seitengestaltung -

Schritt 1 – Erstellen Sie zwei Dateien iFrameFile11.html und iFrameFile22.html.

Schritt 2 – Schreiben Sie den HTML-Code in iFrameFile11.html und erstellen Sie in dieser Datei zwei iFrames mit den Namen iframeUpper und iframeBottom.

Schritt 3 – Lassen Sie iframeBottom leer und laden Sie die Datei iFrameFile22.html aus iframeUpper.

Schritt 4 – Schreiben Sie den HTML-Code in iFrameFile22.html und erstellen Sie zwei Tags

in dieser Datei

Schritt 5 – Verwenden Sie href zusammen mit dem relativen oder absoluten Pfad und Dateinamen der Videodatei im -Tag und verwenden Sie target="iframeBottom" in einem -Tag und target=_self in einem anderen -Tag

Schritt 6 – Öffnen Sie iFrameFile11.html in Ihrem Browser. Der Link erscheint im iFrame oben. Klicken Sie auf die Links, um den Inhalt der Videodatei anzuzeigen. Zuerst wird der Inhalt im unteren iFrame und dann im gleichen oberen iFrame angezeigt.

Die folgenden Dateien werden in diesem Beispiel verwendet

Datei 1 − iFrameFile11.html

Datei 2 – iFrameFile22.html

Datei 3 – Birdvideo.mp4

iFrameFile11.html Code:

<!DOCTYPE html>
<html>
   <body>
      <center>
         <iframe src=".\iframeFile22.html" 
            name="iframeUpper" 
            width="70%" 
            height="300">
         </iframe>
         <br /><br />
         <iframe src="" 
            name="iframeBottom" 
            width="25%" height="250">
         </iframe>
      </center>
   </body>
</html>

Die chinesische Übersetzung von

Code For iFrameFile22.html

lautet:

Code For iFrameFile22.html

<!DOCTYPE html>
<html>
   <body>
      <center>
         <h1 style="color: purple">Showing Beautiful Birds Video</h1>
         <h2 style="color: cyan">You will love this...</h2>
         <h3 style="color: orange">Just click the links</h2>
         <p>
            <a href=
            "./birdvideo.mp4" target="iframeBottom">
            First Open the Video in the bottom frame
            </a>
         </p>
         <p>
            <a href=
            "./birdvideo.mp4" target=_self>
            Open The video in the same frame
            </a>
         </p>
   </center>
   </body>
</html>

Ergebnisse anzeigen – Beispiel 2:

Um die Ergebnisse anzuzeigen, öffnen Sie iFrameFile11.html in Ihrem Browser. Klicken Sie nun auf den Link und überprüfen Sie die Ergebnisse.

In diesem HTML-Iframe- und a-href-Artikel wird anhand von zwei verschiedenen Beispielen die Methode zur Anzeige des Inhalts im zweiten Iframe durch Klicken auf den Link im ersten Iframe beschrieben. Das zweite Beispiel zeigt auch, wie Inhalte innerhalb desselben Iframes angezeigt werden. Das erste Beispiel verwendet eine Bilddatei, während das zweite Beispiel ein Videoanzeigebeispiel verwendet.

Das obige ist der detaillierte Inhalt vonWie lade ich einen Hyperlink von einem Iframe in einen anderen Iframe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html if for href

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie füge ich eine Option in eine Dropdown-Liste in HTML ein?Nächster Artikel：Wie füge ich eine Option in eine Dropdown-Liste in HTML ein?

In Verbindung stehende Artikel

Mehr sehen