資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何從一個 iframe 載入超連結到另一個 iframe？
有時，任務是在一個容器中點選連結，並在另一個容器中顯示內容。在 HTML 中，iframe 用於輕鬆地在頁面上的指定區域顯示內容。在本文中，使用兩個不同的示例，連結用於使用另一個 iframe 連結載入 iframe。在示例 1 中，上部 iframe 中的連結用於在下部 iframe 中顯示兩張不同的圖片。在示例 2 中，使用上部 iframe 中的連結，影片內容在下部 iframe 和上部 iframe 中同時顯示。
示例 1：在上部 iframe 中使用兩個文字連結顯示和更改下部 iframe 中的圖片內容
資料夾和頁面設計步驟 −
步驟 1 − 建立兩個檔案 iFrameFile1.html 和 iFrameFile2.html。
步驟 2 − 在 iFrameFile1.html 中編寫 html 程式碼，並在該檔案中建立兩個名為 iframeUpper 和 iframeBottom 的 iframe。
步驟 3 − 保持 iframeBottom 為空，並從 iframeUpper 內部載入 iFrameFile2.html 檔案。
步驟 4 − 在 iFrameFile2.html 中編寫 html 程式碼，並在該檔案中建立兩個 <a> 標籤。
步驟 5 − 使用 href 附帶圖片檔案的相對或絕對路徑和檔名，並在 <a> 標籤中使用 target="iframeBottom”。
步驟 6 − 在瀏覽器中開啟 iFrameFile1.html。連結將顯示在上部 iframe 中。依次點選連結，檢視下部 iframe 中的圖片檔案內容的變化。
此示例中使用了以下檔案
檔案 1 − iFrameFile1.html
檔案 2 − iFrameFile2.html
檔案 3 − birdalone.jpg
檔案 4 − bird.jpg
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 中顯示影片內容
資料夾和頁面設計步驟 −
步驟 1 − 建立兩個檔案 iFrameFile11.html 和 iFrameFile22.html。
步驟 2 − 在 iFrameFile11.html 中編寫 html 程式碼，並在該檔案中建立兩個名為 iframeUpper 和 iframeBottom 的 iframe。
步驟 3 − 保持 iframeBottom 為空，並從 iframeUpper 內部載入 iFrameFile22.html 檔案。
步驟 4 − 在 iFrameFile22.html 中編寫 html 程式碼，並在該檔案中建立兩個 <a> 標籤。
步驟 5 − 在兩個 <a> 標籤中使用 href 附帶影片檔案的相對或絕對路徑和檔名，並在其中一個 <a> 標籤中使用 target="iframeBottom"，在另一個 <a> 標籤中使用 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>
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>
檢視結果 - 示例 2
要檢視結果，請在瀏覽器中開啟 iFrameFile11.html。現在點選連結並檢查結果。
在這篇 HTML iframe 和 a-href 文章中，使用兩個不同的示例，給出了透過點選第一個 iframe 中的連結在第二個 iframe 中顯示內容的方法。第二個示例還展示瞭如何在同一個 iframe 中檢視內容。第一個示例使用圖片檔案，而第二個示例使用影片顯示示例。
527 次瀏覽
