Bagaimana untuk memuatkan hiperpautan dari satu iframe ke iframe lain?-html tutorial-php.cn

Bagaimana untuk memuatkan hiperpautan dari satu iframe ke iframe lain?

WBOY

Lepaskan： 2023-09-07 11:41:14

ke hadapan

742 orang telah melayarinya

Bagaimana untuk memuatkan hiperpautan dari satu iframe ke iframe lain?

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

Terjemahan bahasa Cina bagi

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!

Bagaimana untuk memuatkan hiperpautan dari satu iframe ke iframe lain?

Contoh 1: Gunakan dua pautan teks di bahagian atas Iframe untuk memaparkan dan menukar kandungan imej di bahagian bawah Iframe

ialah:

<!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

<!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
Terjemahan bahasa Cina bagi

ialah:

Bagaimana untuk memuatkan hiperpautan dari satu iframe ke iframe lain?

Contoh 1: Gunakan dua pautan teks di bahagian atas Iframe untuk memaparkan dan menukar kandungan imej di bahagian bawah Iframe

ialah:

<!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

<!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 Terjemahan bahasa Cina bagi

ialah:

<!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

<!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
Terjemahan bahasa Cina bagi