Kadang-kadang tugasnya adalah untuk mengklik pautan dalam satu bekas dan kemudian memaparkan kandungan dalam bekas lain. Dalam HTML, iframe digunakan untuk memaparkan kandungan dengan mudah dalam kawasan tertentu pada halaman. Dalam artikel ini, menggunakan dua contoh berbeza, pautan digunakan untuk memuatkan iframe melalui pautan iframe yang lain. Dalam Contoh 1, pautan dalam iframe atas digunakan untuk memaparkan dua imej berbeza dalam iframe bawah. Dalam contoh 2, menggunakan pautan dalam iframe atas, kandungan video dipaparkan dalam iframe bawah dan iframe atas.
Contoh 1: Gunakan dua pautan teks di bahagian atas Iframe untuk memaparkan dan menukar kandungan imej di bahagian bawah Iframe
Langkah reka bentuk folder dan halaman -
Langkah 1 − Cipta dua fail iFrameFile1.html dan iFrameFile2.html.
Langkah 2 - Tulis kod html dalam iFrameFile1.html dan buat dua iFrames dalam fail ini bernama iframeUpper dan iframeBottom.
Langkah 3 - Pastikan iframeBottom kosong dan muatkan fail iFrameFile2.html dari dalam iframeUpper.
Langkah 4 - Tulis kod html dalam iFrameFile2.html dan buat dua tag
Langkah 5 - Gunakan href dan laluan relatif atau mutlak ke nama fail fail imej dan gunakan target="iframeBottom" dalam teg
Langkah 6 - Buka iFrameFile1.html dalam penyemak imbas anda. Pautan akan muncul dalam iframe di atas. Klik pautan satu demi satu dan anda boleh melihat bahawa kandungan fail imej di bahagian bawah iframe berubah.
Fail berikut digunakan dalam contoh ini
File1 − iFrameFile1.html
Fail 2 - iFrameFile2.html
Fail 3 − birdalone.jpg
Fail 4 − burung.jpg
Terjemahan bahasa Cina bagi
Code For iFrameFile1.html
ialah:
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>
Salin selepas log masuk
iFrameFile2.html kod
<!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>
Salin selepas log masuk
Lihat hasil - Contoh 1
Untuk melihat hasilnya, buka iFrameFile1.html dalam penyemak imbas anda. Sekarang klik pada pautan dan semak hasilnya.
Contoh 2: Gunakan pautan teks dalam Iframe atas untuk memaparkan kandungan video dalam Iframe bawah dan atas Iframe
Langkah reka bentuk folder dan halaman -
Langkah 1 - Buat dua fail iFrameFile11.html dan iFrameFile22.html.
Langkah 2 - Tulis kod html dalam iFrameFile11.html dan buat dua iFrames bernama iframeUpper dan iframeBottom dalam fail ini.
Langkah 3 - Pastikan iframeBottom kosong dan muatkan fail iFrameFile22.html dari dalam iframeUpper.
Langkah 4 - Tulis kod html dalam iFrameFile22.html dan buat dua tag dalam fail ini
Langkah 5 - Gunakan href bersama dengan laluan relatif atau mutlak dan nama fail fail video dalam tag dan gunakan target="iframeBottom" dalam satu tag dan target=_self dalam yang lain tag
Langkah 6 - Buka iFrameFile11.html dalam penyemak imbas anda. Pautan akan muncul dalam iFrame di atas. Klik pautan untuk melihat kandungan fail video. Mula-mula kandungan akan dipaparkan di iFrame bawah dan kemudian di iFrame atas yang sama.
Fail berikut digunakan dalam contoh ini
Fail 1 − iFrameFile11.html
Fail 2 - iFrameFile22.html
Fail 3 - Birdvideo.mp4
iFrameFile11.html Kod:
<!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>
Salin selepas log masuk
Code For iFrameFile22.html
ialah:
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>
Salin selepas log masuk
Lihat hasil - Contoh 2:
Untuk melihat hasilnya, buka iFrameFile11.html dalam penyemak imbas anda. Sekarang klik pada pautan dan semak hasilnya.
Dalam artikel HTML Iframe dan a-href ini, menggunakan dua contoh berbeza, kaedah memaparkan kandungan dalam Iframe kedua dengan mengklik pada pautan dalam Iframe pertama diberikan. Contoh kedua juga menunjukkan cara melihat kandungan dalam Iframe yang sama. Contoh pertama menggunakan fail imej, manakala contoh kedua menggunakan contoh paparan video.
Atas ialah kandungan terperinci Bagaimana untuk memuatkan hiperpautan dari satu iframe ke iframe lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
