如何將一個iframe中的超連結載入到另一個iframe？-html教學-PHP中文網

如何將一個iframe中的超連結載入到另一個iframe？

WBOY

發布： 2023-09-07 11:41:14

轉載

700 人瀏覽過

如何將一個iframe中的超連結載入到另一個iframe？

有時候，任務是在一個容器中點擊一個鏈接，然後在另一個容器中顯示內容。在HTML中，使用iframes可以輕鬆地在頁面上指定的區域顯示內容。在本文中，使用兩個不同的範例，連結被用來透過另一個iframe連結載入一個iframe。在範例1中，上方iframe中的連結用於在下方iframe中顯示兩張不同的圖片。在範例2中，使用上方iframe中的鏈接，影片內容同時顯示在下方iframe和上方iframe。

範例1：在上部Iframe中使用兩個文字連結來顯示和更改底部Iframe中的圖片內容

資料夾與頁面設計步驟 -

步驟 1 − 建立兩個檔案 iFrameFile1.html 和 iFrameFile2.html。

步驟 2 - 在 iFrameFile1.html 中編寫 html 程式碼，並在此檔案中建立兩個 iFrame，名稱為 iframeUpper 和 iframeBottom。

第三步 - 將iframeBottom保持為空，並從iframeUpper內部載入iFrameFile2.html檔案。

第四步 - 在iFrameFile2.html中編寫html程式碼，並在此檔案中建立兩個標籤

步驟 5 - 使用 href 和圖片檔案的檔案名稱的相對或絕對路徑，並在標籤中使用 target="iframeBottom"

步驟 6 - 在瀏覽器中開啟 iFrameFile1.html。連結將顯示在上方的 iframe 中。逐一點擊鏈接，可以看到底部 iframe 中的圖片文件內容發生變化。

本例中使用了以下檔案

檔案1 − iFrameFile1.html

檔 2 - iFrameFile2.html

檔 3 − birdalone.jpg

##檔4 − bird.jpg

Code For iFrameFile1.html

的中文翻譯為：

程式碼 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 程式碼

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

登入後複製

查看結果 - 範例1

要查看結果，請在瀏覽器中開啟 iFrameFile1.html。現在點擊連結並檢查結果。

範例 2：在上層 Iframe 中使用文字連結在下層 Iframe 和上層 Iframe 中顯示影片內容

資料夾與頁面設計步驟 -

第一步 - 建立兩個檔案 iFrameFile11.html 和 iFrameFile22.html。

第二步驟 - 在iFrameFile11.html中編寫html程式碼，並在該檔案中建立兩個名為iframeUpper和iframeBottom的iFrame。

第三步驟 - 保持iframeBottom為空，並從iframeUpper內載入iFrameFile22.html檔案。

步驟 4 - 在 iFrameFile22.html 中編寫 html 程式碼，並在此檔案中建立兩個標籤

第5 步驟 - 在標記中使用href 以及相對或絕對路徑以及視訊檔案的檔案名，並在一個標記中使用target="iframeBottom" 並使用另一個標記中的target=_self

步驟6 - 在瀏覽器中開啟iFrameFile11.html。連結將顯示在上方的iFrame中。依序點擊連結以查看影片檔案的內容。首先，內容將顯示在底部的iFrame中，然後在同一上方的iFrame中顯示。

本例中使用了下列檔案

檔1 − iFrameFile11.html

#檔 2 - iFrameFile22.html

##檔 3 - Birdvideo.mp4

#iFrameFile11.html 程式碼：

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

登入後複製

Code For iFrameFile22.html

的中文翻譯為：

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>

登入後複製