有時(shí)候，任務(wù)是在一個(gè)容器中點(diǎn)擊一個(gè)鏈接，然后在另一個(gè)容器中顯示內(nèi)容。在HTML中，使用iframes可以輕松地在頁面上指定的區(qū)域顯示內(nèi)容。在本文中，使用兩個(gè)不同的示例，鏈接被用來通過另一個(gè)iframe鏈接加載一個(gè)iframe。在示例1中，上方iframe中的鏈接用于在下方iframe中顯示兩張不同的圖片。在示例2中，使用上方iframe中的鏈接，視頻內(nèi)容同時(shí)顯示在下方iframe和上方iframe中。
示例1：在上部Iframe中使用兩個(gè)文本鏈接來顯示和更改底部Iframe中的圖片內(nèi)容
文件夾和頁面設(shè)計(jì)步驟 –
步驟 1 ? 創(chuàng)建兩個(gè)文件 iFrameFile1.html 和 iFrameFile2.html。
步驟 2 – 在 iF??rameFile1.html 中編寫 html 代碼，并在此文件中創(chuàng)建兩個(gè) iFrame，名稱為 iframeUpper 和 iframeBottom。
第三步 – 將iframeBottom保持為空，并從iframeUpper內(nèi)部加載iFrameFile2.html文件。
第四步 – 在iFrameFile2.html中編寫html代碼，并在此文件中創(chuàng)建兩個(gè)標(biāo)簽
步驟 5 – 使用 href 和圖片文件的文件名的相對(duì)或絕對(duì)路徑，并在 標(biāo)簽中使用 target=”iframeBottom”
步驟 6 – 在瀏覽器中打開 iFrameFile1.html。鏈接將顯示在上方的 iframe 中。逐個(gè)點(diǎn)擊鏈接，可以看到底部 iframe 中的圖片文件內(nèi)容發(fā)生變化。
本例中使用了以下文件
文件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>
登錄后復(fù)制
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>
登錄后復(fù)制
查看結(jié)果 – 示例1
要查看結(jié)果，請(qǐng)?jiān)跒g覽器中打開 iFrameFile1.html。現(xiàn)在點(diǎn)擊鏈接并檢查結(jié)果。
示例 2：在上層 Iframe 中使用文本鏈接在下層 Iframe 和上層 Iframe 中顯示視頻內(nèi)容
文件夾和頁面設(shè)計(jì)步驟 –
第一步 – 創(chuàng)建兩個(gè)文件 iFrameFile11.html 和 iFrameFile22.html。
第二步 – 在iFrameFile11.html中編寫html代碼，并在該文件中創(chuàng)建兩個(gè)名為iframeUpper和iframeBottom的iFrame。
第三步 – 保持iframeBottom為空，并從iframeUpper內(nèi)加載iFrameFile22.html文件。
步驟 4 – 在 iF??rameFile22.html 中編寫 html 代碼，并在此文件中創(chuàng)建兩個(gè) 標(biāo)記
第 5 步 – 在 標(biāo)記中使用 href 以及相對(duì)或絕對(duì)路徑以及視頻文件的文件名，并在一個(gè) 標(biāo)記中使用 target=”iframeBottom” 并使用另一個(gè) 標(biāo)記中的 target=_self
第6步 – 在瀏覽器中打開iFrameFile11.html。鏈接將顯示在上方的iFrame中。依次點(diǎn)擊鏈接以查看視頻文件的內(nèi)容。首先，內(nèi)容將顯示在底部的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>
登錄后復(fù)制
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>
登錄后復(fù)制
查看結(jié)果 – 示例 2：
要查看結(jié)果，請(qǐng)?jiān)跒g覽器中打開 iFrameFile11.html。現(xiàn)在點(diǎn)擊鏈接并檢查結(jié)果。
在這個(gè)HTML的Iframe和a-href文章中，使用兩個(gè)不同的示例，通過點(diǎn)擊第一個(gè)Iframe中的鏈接來展示第二個(gè)Iframe中的內(nèi)容的方法被給出。第二個(gè)示例還展示了如何在同一個(gè)Iframe中查看內(nèi)容。第一個(gè)示例使用圖片文件，而第二個(gè)示例使用了一個(gè)視頻顯示示例。
以上就是如何將一個(gè)iframe中的超鏈接加載到另一個(gè)iframe中？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
