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.jpgLa traduction chinoise de

Code For iFrameFile1.html

est :

Code For iFrameFile1.html

Copier après la connexion

Code iFrameFile2.html

    
Showing Beautiful Birds
 
You will love this...
 
Just click the links
 
 The Cuteee Bird 
 
 The Friends Together 
   

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 deuxbalisesdans ce fichier

Étape 5- Utilisez href avec le chemin relatif ou absolu et le nom du fichier vidéo dans la baliseet utilisez target="iframeBottom" dans une baliseet 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 :

Copier après la connexion

La traduction chinoise de

Code For iFrameFile22.html

est :

Code For iFrameFile22.html

    
Showing Beautiful Birds Video
 
You will love this...
 
Just click the links
 
  First Open the Video in the bottom frame  
 
  Open The video in the same frame  
   

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!