Ce blog vous expliquera comment changer la source de l'iframe en JavaScript.
Qu'est-ce qu'un cadre en ligne ?
Un ' cadre en ligne ” est utilisé pour contenir un autre document spécifié dans le document actuel. Cela entraîne la commutation des pages Web en fonction des liens indiqués.
Comment changer la source Iframe en JavaScript ?
La source Iframe peut être modifiée en JavaScript en utilisant les approches suivantes avec le ' getElementById() ' méthode:
- ' Paramètre passé « Technique.
- ' index sélectionné ' Propriété.
Approche 1 : Modifier la source Iframe en JavaScript à l'aide de la technique des paramètres passés
Cette technique peut être utilisée pour basculer vers la page spécifiée en plaçant le lien de la page correspondante en tant que paramètre d'une fonction lorsqu'elle est accessible à l'aide d'un bouton.
Exemple
Suivons l'exemple ci-dessous :
< centre >< h2 > Changer la source de l'iframe dans Javascript h2 >
< identifiant iframe = 'page web' src = 'https://linuxhint.com/detect-tab-key-javascript/' largeur = '1000' la taille = '550' bordure de cadre = '0' défilement = 'Non' > iframe >
< Br >< Br >
< bouton onclick = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Cliquez pour afficher la page des commandes Linux bouton >
< Br > Br >
centre >
Dans les lignes de code ci-dessus, procédez comme suit :
- Spécifiez le lien indiqué dans le '
” avec les dimensions ajustées. - Créez également un bouton avec un ' sur clic ” événement redirigeant vers la fonction changeIframe() ayant le lien spécifié comme paramètre.
- Cela aura pour effet de diriger la page vers le lien indiqué lors du clic sur le bouton.
Continuons avec la partie JavaScript du code :
< type de scénario = 'texte/javascript' >
fonction changerIframe ( monnaie ) {
document. getElementById ( 'page web' ) . src = monnaie ;
}
scénario >
Dans l'extrait de code ci-dessus :
- Déclarez une fonction nommée ' changeIframe() ”.
- Dans sa définition, accédez au lien spécifié dans le ' cadre en ligne ” élément en utilisant le “ document.getElementById() ' méthode.
- Après cela, appliquez le ' src ' attribut et allouer le lien indiqué lors de l'accès de la fonction au lien accédé à l'aide du paramètre ' monnaie ”.
- Cela entraînera la commutation des pages par rapport aux liens spécifiés lors du clic sur le bouton.
Production
Dans la sortie ci-dessus, on peut observer que les pages sont commutées en cliquant sur le bouton.
Approche 2 : Modifier la source Iframe en JavaScript à l'aide de la propriété selectedIndex
La ' index sélectionné ” renvoie l'index de l'option sélectionnée dans une liste déroulante. Cette propriété peut être appliquée pour rediriger vers le lien spécifié par rapport à la valeur de l'option sélectionnée dans la liste déroulante.
Exemple
Observons l'exemple suivant :
< identifiant iframe = 'page web' src = 'https://linuxhint.com/detect-tab-key-javascript/' largeur = '1000' la taille = '550' bordure de cadre = '0' défilement = 'Non' > iframe >
< Br >< Br >
< sélectionner l'identifiant = 'liens' >
< valeur d'option = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Passer à l'article 1
< valeur d'option = 'https://linuxhint.com/convert-array-to-object-javascript/' > Passer à l'article deux
sélectionner >
< Br >< Br >
< bouton onClick = 'changeIframe();' > Changer Iframe Src bouton >
< Br >< Br >
corps > centre >
Dans les lignes de code ci-dessus, procédez comme suit :
- Rappelez-vous l'étape pour spécifier le lien indiqué dans le '