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.
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
-TagSchritt 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.
File1 − iFrameFile1.html
Datei 2 - iFrameFile2.html
Datei 3 − Birdalone.jpg
Datei 4 − Bird.jpg
Die chinesische Übersetzung von
<!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>
<!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>
Um die Ergebnisse anzuzeigen, öffnen Sie iFrameFile1.html in Ihrem Browser. Klicken Sie nun auf den Link und überprüfen Sie die Ergebnisse.
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 DateiSchritt 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
<!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>
<!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>
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!
Welche Möglichkeiten gibt es, Iframe zu schreiben?
So lösen Sie das Problem, dass CSS nicht geladen werden kann
Was tun, wenn CSS nicht geladen werden kann?
Was tun, wenn das Laden der DLL fehlschlägt?
So verwenden Sie die Plotfunktion in Python
Einführung in die Online-Rechnersoftware
So konfigurieren Sie den virtuellen JSP-Speicherplatz
Zu welcher Währung gehört USDT?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
