Comment charger un lien hypertexte d'une iframe vers une autre iframe ?-tutoriel HTML-php.cn

Comment charger un lien hypertexte d'une iframe vers une autre iframe ?

WBOY

Libérer： 2023-09-07 11:41:14

avant

789 Les gens l'ont consulté

Comment charger un lien hypertexte dune iframe vers une autre iframe ?

Parfois, la tâche consiste à cliquer sur un lien dans un conteneur, puis à afficher le contenu dans un autre conteneur. En HTML, les iframes sont utilisées pour afficher facilement le contenu dans une zone spécifiée de la page. Dans cet article, à l'aide de deux exemples différents, des liens sont utilisés pour charger une iframe via un autre lien iframe. Dans l'exemple 1, le lien dans l'iframe supérieure est utilisé pour afficher deux images différentes dans l'iframe inférieure. Dans l'exemple 2, en utilisant le lien dans l'iframe supérieure, le contenu vidéo est affiché à la fois dans l'iframe inférieure et dans l'iframe supérieure.

Exemple 1 : utilisez deux liens texte dans l'Iframe supérieur pour afficher et modifier le contenu de l'image dans l'Iframe inférieur

Étapes de conception des dossiers et des pages -

Étape 1 - Créez deux fichiers iFrameFile1.html et iFrameFile2.html.

Étape 2 - Écrivez du code html dans iFrameFile1.html et créez deux iFrames dans ce fichier nommés iframeUpper et iframeBottom.

Étape 3 - Gardez iframeBottom vide et chargez le fichier iFrameFile2.html depuis iframeUpper.

Étape 4 - Écrivez du code HTML dans iFrameFile2.html et créez deux balises

Étape 5 - Utilisez href et le chemin relatif ou absolu du nom de fichier du fichier image et utilisez target="iframeBottom" dans la balise

Étape 6 - Ouvrez iFrameFile1.html dans votre navigateur. Le lien apparaîtra dans l'iframe ci-dessus. Cliquez sur les liens un par un et vous pouvez voir que le contenu du fichier image dans l'iframe inférieur change.

Les fichiers suivants sont utilisés dans cet exemple

Fichier1 − iFrameFile1.html

Fichier 2 - iFrameFile2.html

Fichier 3 − birdalone.jpg

Fichier 4 − oiseau.jpg La traduction chinoise de

Code For iFrameFile1.html

est :

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>

Copier après la connexion

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

Copier après la connexion

Afficher les résultats - Exemple 1

Pour voir les résultats, ouvrez iFrameFile1.html dans votre navigateur. Cliquez maintenant sur le lien et vérifiez les résultats.

Exemple 2 : Utilisez un lien texte dans l'Iframe supérieur pour afficher le contenu vidéo dans l'Iframe inférieur et l'Iframe supérieur

Étapes de conception des dossiers et des pages -

Étape 1 - Créez deux fichiers iFrameFile11.html et iFrameFile22.html.

Étape 2 - Écrivez le code html dans iFrameFile11.html et créez deux iFrames nommés iframeUpper et iframeBottom dans ce fichier.

Étape 3 - Gardez iframeBottom vide et chargez le fichier iFrameFile22.html depuis iframeUpper.

Étape 4 - Écrivez le code html dans iFrameFile22.html et créez deux balises dans ce fichier

Étape 5 - Utilisez href avec le chemin relatif ou absolu et le nom du fichier vidéo dans la balise et utilisez target="iframeBottom" dans une balise et target=_self dans une autre balise

Étape 6 - Ouvrez iFrameFile11.html dans votre navigateur. Le lien apparaîtra dans l'iFrame ci-dessus. Cliquez sur les liens pour afficher le contenu du fichier vidéo. Le contenu sera d’abord affiché dans l’iFrame inférieur, puis dans le même iFrame supérieur.

Les fichiers suivants sont utilisés dans cet exemple

Fichier 1 − iFrameFile11.html

Fichier 2 - iFrameFile22.html

Fichier 3 - Birdvideo.mp4

iFrameFile11.html Code :

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

Copier après la connexion

La traduction chinoise de

Code For iFrameFile22.html

est :

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>

Copier après la connexion

Afficher les résultats - Exemple 2 :

Pour voir les résultats, ouvrez iFrameFile11.html dans votre navigateur. Cliquez maintenant sur le lien et vérifiez les résultats.

Dans cet article HTML Iframe et a-href, à l'aide de deux exemples différents, la méthode d'affichage du contenu dans la deuxième Iframe en cliquant sur le lien dans la première Iframe est donnée. Le deuxième exemple montre également comment afficher le contenu dans la même Iframe. Le premier exemple utilise un fichier image, tandis que le deuxième exemple utilise un exemple d'affichage vidéo.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Comment charger un lien hypertexte d'une iframe vers une autre iframe ?

Exemple 1 : utilisez deux liens texte dans l'Iframe supérieur pour afficher et modifier le contenu de l'image dans l'Iframe inférieur

est :

<!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>
Copier après la connexion

<!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>
Copier après la connexion
La traduction chinoise de

est :

Comment charger un lien hypertexte d'une iframe vers une autre iframe ?

Exemple 1 : utilisez deux liens texte dans l'Iframe supérieur pour afficher et modifier le contenu de l'image dans l'Iframe inférieur

est :

<!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> Copier après la connexion

<!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> Copier après la connexion La traduction chinoise de

est :

<!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>
Copier après la connexion

<!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>
Copier après la connexion
La traduction chinoise de