Probleme d affichage dans un iframe
Fermé
ViRuS-MaN
-
20 sept. 2021 à 10:08
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 22 sept. 2021 à 14:32
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 22 sept. 2021 à 14:32
A voir également:
- Probleme d affichage dans un iframe
- Affichage double ecran - Guide
- Windows 11 affichage classique - Guide
- Problème affichage fenêtre windows 10 - Guide
- Modifier affichage heure iphone - Guide
- Problème affichage photo sur le bon coin ✓ - Forum Virus
3 réponses
Salut,
pas très rigoureux tout ça et en tout cas plein de fautes.
1)Déjà une adresse URL ne peut pas contenir d'espace donc ceci risque pas d'aboutir à quoi que ce soit:
a href="index francais.html"
avec ou sans JavaScript ce sera le même probléme: un fichier ne peut pas s'appeller sur le web "index francais.html" et s'il s'agit du répertoire(dossier) index que vous ciblez il faut l'écrire comme ceci en relatif(à partir du niveau zéro du site):
href= index/francais.html
2) il faut éviter d'utiliser l'attribut onclick alors qu'il y a largement mieux avec addEventListener.
Cela permet de séparer la programmation du HTML et de pouvoir mieux gérer l'événement, description ici:
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
Après avoir corrigé et amélioré votre code vous pouvez commencer à travailler.
Changer le contenu d'une iframe revient à changer l'attribut src de l'iframe concernée, exemple
donc pour le JavaScript:
Qu'on peut bien sûr améliorer/optimiser en créant au sein d'une fonction pour pouvoir réutiliser et changer facilement le fichier chargé par l'iframe:
Et encore mieux en utilisant des paramètres pour tout les éléments:
Bon le nom de la dernière fonction est un peu long et bien sûr on peut séparer en plusieurs fonctions imbriquées si l'on veut vraiment quelque chose d'optimal mais c'est à visée didactique.
En espérant être clair, si ce n'est pas le cas approfondissez vos connaissances de JavaScript sur les sélecteurs(ici avec getElementById qui permet d'obtenir un élément HTML du DOM) et la programmation événementielle(addEventListener).
Pour l'exemple en subdivisant et chaînant les fonctions:
On peut remarquer que le chaînage est possible en utilisant le mot clé return et qu'il est possible d'inclure une fonction dans une autre. Cela permet une meilleure réutilisation du code/modularité et de changer facilement les effets obtenus en variant les paramètres.
Voir aussi la doc de .querySelector qui utilise un symbole en début de chaîne de caractère pour déterminer la méthode de sélection d'un ou plusieurs éléments de la page, ici le # correspond à l'id de l'élément(donc une valeur unique, l'élément cible du DOM).
pas très rigoureux tout ça et en tout cas plein de fautes.
1)Déjà une adresse URL ne peut pas contenir d'espace donc ceci risque pas d'aboutir à quoi que ce soit:
a href="index francais.html"
avec ou sans JavaScript ce sera le même probléme: un fichier ne peut pas s'appeller sur le web "index francais.html" et s'il s'agit du répertoire(dossier) index que vous ciblez il faut l'écrire comme ceci en relatif(à partir du niveau zéro du site):
href= index/francais.html
2) il faut éviter d'utiliser l'attribut onclick alors qu'il y a largement mieux avec addEventListener.
Cela permet de séparer la programmation du HTML et de pouvoir mieux gérer l'événement, description ici:
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
Après avoir corrigé et amélioré votre code vous pouvez commencer à travailler.
Changer le contenu d'une iframe revient à changer l'attribut src de l'iframe concernée, exemple
<!DOCTYPE html> <html> <body> page principale <button id="changeiframe">changer l'iframe</button> <iframe id="moniframe" src="moniframe.html"></iframe> </body> </html>
donc pour le JavaScript:
document.getElementById('changeiframe').addEventListener('click',function(){
document.getElementById('moniframe').src='uneautreiframe.html';
}, false);
Qu'on peut bien sûr améliorer/optimiser en créant au sein d'une fonction pour pouvoir réutiliser et changer facilement le fichier chargé par l'iframe:
function chargerUneIframe(adresseIframe){
document.getElementById('moniframe').src=adresseIframe;
}
//-- puis appliquer la fonction au sein de l'événement click du bouton
document.getElementById('changeiframe').addEventListener('click',function(){
chargerUneIframe('uneautreiframe.html');
},false);
Et encore mieux en utilisant des paramètres pour tout les éléments:
function selectionBoutonEtIframePourChargerNouveauContenu(elementBouton, elementIframe, nouvelleAdresse){
elementBouton.addEventListener('click',function(){
elementIframe.src=nouvelleAdresse;
},false);
}
//-- en utilisant la fonction comme ceci(avec l'exemple du début):
selectionBoutonEtIframePourChargerNouveauContenu(document.getElementById('changeIframe'), document.getElementById('moniframe'),'uneautreiframe.html');
Bon le nom de la dernière fonction est un peu long et bien sûr on peut séparer en plusieurs fonctions imbriquées si l'on veut vraiment quelque chose d'optimal mais c'est à visée didactique.
En espérant être clair, si ce n'est pas le cas approfondissez vos connaissances de JavaScript sur les sélecteurs(ici avec getElementById qui permet d'obtenir un élément HTML du DOM) et la programmation événementielle(addEventListener).
Pour l'exemple en subdivisant et chaînant les fonctions:
function selecteurHTML(methode,nom){
return document.querySelector(methode+nom);
}
function changeIframe(cible, adresse){
cible.src=adresse;
}
selecteurHTML('#','changeiframe').addEventListener('click',
function(){
changeIframe(selecteur('#','moniframe'), 'uneautreiframe.html');
},
false);
On peut remarquer que le chaînage est possible en utilisant le mot clé return et qu'il est possible d'inclure une fonction dans une autre. Cela permet une meilleure réutilisation du code/modularité et de changer facilement les effets obtenus en variant les paramètres.
Voir aussi la doc de .querySelector qui utilise un symbole en début de chaîne de caractère pour déterminer la méthode de sélection d'un ou plusieurs éléments de la page, ici le # correspond à l'id de l'élément(donc une valeur unique, l'élément cible du DOM).
Merci pour votre réponse mais je ne suis pas sur que vous avez bien compris ce que je recherche.
donc je vous montre un exemple ici
https://www.mediafire.com/file/i43bj2xuq2tr16r/essaie.7z/file
le test c'est ce que j ai déjà et qui fonctionne
et le test 2 c'est ce qui ne fonctionne pas et que je cherche a faire.
dans test vous voyez en bas a gauche quand vous êtes sur le bouton le nom de l url et dans le test 2 vous voyez le nom que je veux faire apparaitre mais quand je clique sur le bouton il ne m'affiche pas la page dans l iframe car je ne suis pas parvenue a comprendre comment intégrer la commande target.
moi je veux que l'on vois mon adresse de site et pas le lien de la page.
Merci d'avance pour toutes aide.
je suis un novice et je commence a essayer de faire un petit site personnel.
donc je vous montre un exemple ici
https://www.mediafire.com/file/i43bj2xuq2tr16r/essaie.7z/file
le test c'est ce que j ai déjà et qui fonctionne
et le test 2 c'est ce qui ne fonctionne pas et que je cherche a faire.
dans test vous voyez en bas a gauche quand vous êtes sur le bouton le nom de l url et dans le test 2 vous voyez le nom que je veux faire apparaitre mais quand je clique sur le bouton il ne m'affiche pas la page dans l iframe car je ne suis pas parvenue a comprendre comment intégrer la commande target.
moi je veux que l'on vois mon adresse de site et pas le lien de la page.
Merci d'avance pour toutes aide.
je suis un novice et je commence a essayer de faire un petit site personnel.
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
22 sept. 2021 à 14:32
22 sept. 2021 à 14:32
Bonjour,
En supposant que tu as bien une balise iframe avec un attribut name="ViRuS", tu devrais pouvoir modifier l'attribut onclick sur ton lien comme ceci :
Néanmoins l'utilisation des iframe pour afficher des pages internes du même site n'est généralement pas recommandée.
Le fait d'afficher une url différente de la vraie url de la page à afficher ne me semble pas être une bonne pratique. Si c'est pour modifier les urls de ton site, tu devrais plutôt revoir la structure de celui-ci ou faire de la réécriture d'url.
Bonne journée,
En supposant que tu as bien une balise iframe avec un attribut name="ViRuS", tu devrais pouvoir modifier l'attribut onclick sur ton lien comme ceci :
<a href="http://adresse-du-site.com" onclick="document.ViRuS.location='index_francais.html'; return false;">Francais</a>
Néanmoins l'utilisation des iframe pour afficher des pages internes du même site n'est généralement pas recommandée.
Le fait d'afficher une url différente de la vraie url de la page à afficher ne me semble pas être une bonne pratique. Si c'est pour modifier les urls de ton site, tu devrais plutôt revoir la structure de celui-ci ou faire de la réécriture d'url.
Bonne journée,
