Modification de CSS iFrame via JS

Version imprimable

01/10/2024, 06h53
mafooley

Modification de CSS iFrame via JS
Bonjour a tous,

je but sur un problème surement simple à résoudre mais malgré mes recherches, je rame...

Je vais simplifier grandement dans mon exemple mais en gros le fonctionnement reste le même :

J'ai 2 pages HTML "index.html" et "page2.html"
J'ai 2 fichiers css "style.css" et "page2.css" (dans mon cas, c'est important d'en avoir 2...)
J'ai 1 fichier javascript "code.js"

Dans ma page index.html, j'ai un bouton avec une propriété onclick="texteEnRouge()" et avec id="monBouton".
J'ai également une balise <iframe> qui m'affiche la page "page2.html".
Dans le <head> de ma page "page2.html", j'appelle mon fichiers "style.css" et à la fin de mon <body>, j'appelle bien mon "code.js"

Dans ma page "page2.html", j'ai un texte dans une balise <p> avec un id="monText"
Dans le <head> de ma page "page2.html", j'appelle mon fichiers "page2.css".

dans mon "page2.css" j'ai juste un style pour mettre mon texte en bleu, jusque-là pas de problème
p{color:blue;}

Dans mon fichier "code.js", j'ai la fonction appelée par mon bouton :
Code:

1 2 3 4 5 let var_text = document.getElementById("monText"); let var_button = document.getElementById("monBouton"); monBouton.addEventListener("click", function(){ var_text.style.color='red'; })
Bien sûr, ça ne fonctionne pas alors que si je mets mon bouton dans "page2.html", ça fonctionne, même depuis la page index, à travers le iframe (en appelant mon code.js dans le fichier page2.html).

En fait, lancer un script depuis une page pour interagir sur le css d'une autre page, ça n'a pas l'air de prendre... j'imagine qu'il n'arrive pas à trouver mon id du texte qui se trouve sur une autre page.

quelqu'un aurait une idée ?

merci d'avance.
01/10/2024, 11h57
gabi7756

Bonjour,
Pas long l'extrait de code lol ...
Et puis ton explication, jsuis pas assez réveillé on va dire.
Je présume que tu utilise ta page2 dans un iframe pour réutiliser ta page dans d'autre cas.

Cdt

1 pièce(s) jointe(s)

Bonjour merci pour ton retour. effectivement, si je me relis, ce n'est pas très compréhensible... je vais essayer de faire mieux cette fois-ci. :D

J'ai une page index.html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html lang=fr dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <button id="monBouton1Index">bouton 01 situé dans index</button> <div class="text1" id="monText1"> Mon texte situé dans la page index qui est modifié par mon bouton 01 </div> <br> <button id="monBouton2Index">bouton 02 situé dans index</button> <br> <br> <iframe id="ID_iframe" class="moniframe" src="page2.html" frameborder="0"></iframe> <script src="code1.js"></script> </body> </html>
J'ai une page page2.html : (cette dernière est appelée dans le iframe situé dans ma page index)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html> <html lang=fr dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <button id="monBoutonPage2">bouton 03 situé dans Page2</button> <div class="text2" id="monText2"> Mon texte situé dans page2 qui est modifié par mon bouton 03 situé lui aussi dans page2 </div> <br> <br> <div class="text3" id="monText3"> Mon texte situé dans page2 qui est modifié par mon bouton 02 situé dans la page index </div> <script src="code2.js"></script> </body> </html>
ça me donne ça :
Pièce jointe 659988

J'ai bien sûr mon fichier css qui ressemble à ça, rien de bien violent :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .text1{ color: green; } .text2{ color: green; } .text3{ color: green; } .moniframe{ border: 1px solid red; width: 700px; height: 300px; }
J'ai également mes 2 fichiers javascript code1.js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 let var_bouton = document.getElementById("monBouton1Index"); let var_text = document.getElementById("monText1"); var_bouton.addEventListener("click", function(){ var_text.style.color = 'red'; }); let var_bouton2 = document.getElementById("monBouton2Index"); let var_text2 = document.getElementById("monText2"); var_bouton2.addEventListener("click", function(){ var_text2.style.color = 'red'; });
et code2.js :
Code:

1 2 3 4 5 let var_bouton3 = document.getElementById("monBoutonPage2"); let var_text3 = document.getElementById("monText3"); var_bouton3.addEventListener("click", function(){ var_text3.style.color = 'red'; });
code1.js est appelé dans index.html et code2.js est appelé dans page2.html

Les fichier javascript ont juste pour rôle de modifier les couleurs des textes des 2 pages html.
Le problème est le suivant :
Quand je clique sur le bouton situé dans la page index qui modifie le texte situé dans la page index, pas de problème.
Quand je clique sur le bouton situé dans la page page2 qui modifie le texte situé dans la page page2, pas de problème.
Mais quand je clique sur le bouton situé dans la page index qui modifie le texte situé dans la page page2, cela ne fonctionne pas.

Je suppose que le terme "document" de document.getElementById("monText2") fait référence au fichier depuis lequel le code a été lancé à savoir index.html. Or, l'id "monText2" est situé sur le fichier page2.html et je suppose que c'est pour ça que le code javascript ne le trouve pas.

voilà, j'espère que c'est un peu plus clair :D

Sinon, je vais aller jeter un œil sur ton lien, il m'a l'air intéressant.

merci

hello,

en fait, c'est bien ce que je pensais. Dans let var_text2 = document.getElementById("monText2"); il faut remplacer "document" par quelque-chose qui renvoie vers la source de l'iframe et donc le fichier page2.html.

J'ai essayé avec contentDocument mais VS Code n'a pas l'air de connaitre cet objet... ? :? (ContentWindow non plus d'ailleurs...)
J'ai essayer ça :
Code:

1 2 3 4 5 6 7 8 let var_bouton2 = Document.getElementById("monBouton2Index"); let frame = document.getElementById("ID_iframe"); let frameDoc = frame.contentDocument ? frame.contentDocument : frame.contentWindow.document; let var_text2 = frameDoc.getElementById("monText3"); var_bouton2.addEventListener("click", function(){ var_text2.style.color = 'red'; });
j'ai même essayé ça :

Code:

let frameDoc = document.getElementById("ID_iframe").contentDocument;

je sèche... :roll:

Bonjour,
Re , je me suis enfin décidé à mettre la main a la pate :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Je te laisse adapté à ton cas 
<!DOCTYPE html>
<html>
<body>
 
<button id="myButton">Click me</button>
 
<iframe id="iframe" src="page2.html" width="300" height="200"></iframe>
 
<script>
document.getElementById("myButton").addEventListener("click", function() {
    var document2=document.querySelector('#iframe').contentDocument
document2.querySelector('#test').style.color='blue'
});
</script>
 
</body>
</html>

Bon courage

Merci beaucoup pour ton code, ça a résolu mon problème et du coup, j'ai vu où il se situait.
J'avais donc ce code dans mon fichier "code1.js" qui ne fonctionnait pas :
Code:

1 2 3 4 5 6 let var_bouton2 = document.getElementById("monBouton2Index"); let frame = document.getElementById("ID_iframe"); let frameDoc = frame.contentDocument; var_bouton2.addEventListener("click", function() { frameDoc.getElementById("monText3").style.color='red'; });
alors qu'il fallait juste mettre la ligne définissant le contentDocument à l'intérieur de la fonction :
Code:

1 2 3 4 5 6 let var_bouton2 = document.getElementById("monBouton2Index"); let frame = document.getElementById("ID_iframe"); var_bouton2.addEventListener("click", function() { let frameDoc = frame.contentDocument; frameDoc.getElementById("monText3").style.color='red'; });
La raison pour laquelle ça ne marche pas lorsque c'est défini hors fonction, je ne la connais pas, mais maintenant ça marche. Merci :D

Alors, petit update, le code fonctionne impeccable dans le visualisateur de VS Code, mais si j'ouvre la page dans un navigateur (j'ai essayé Chrome, Edge et IE) ça ne fonctionne plus.

J'ai tenté de remplacer (j'ai vu ça sur le net...)
let frameDoc = frame.contentDocument;
par
let frameDoc = frame.contentWindow.document;
ou par
let frameDoc = frame.contentDocument || frame.contentWindow.document;

mais rien n'y fait :(

J'ai même ajouté sandbox="allow-scripts allow-same-origin" dans ma balise iframe...

03/10/2024, 08h51
gabi7756

Bonjour,
Quand tu dis que ca ne marche pas t'as un code d'erreur dans la console, normalement pas d'erreur lié à l'origine ...

Citation:

La raison pour laquelle ça ne marche pas lorsque c'est défini hors fonction, je ne la connais pas, mais maintenant ça marche. Merci"

Je vais être honnête j'en ai aucune idée lol

Citation:

J'ai même ajouté sandbox="allow-scripts allow-same-origin" dans ma balise iframe...

si j'ai bien compris le principe c'est pas censé être lié à ca. Tu as deux pages dans le même dossier

Franchement je sèche, à défaut de m'y connaitre assez ...
Tu test en local via un truc comme xamp ? Sur une VM ? Y a un truc qui diffère mais je comprend pas ce qui pète

Merci d'avance
03/10/2024, 09h52
NoSmoking
Bonjour,

Citation:

Envoyé par =mafooley

La raison pour laquelle ça ne marche pas lorsque c'est défini hors fonction, je ne la connais pas, mais maintenant ça marche.

problème de déclaration hors scope, voir :
la littérature est assez nombreuses ...

Citation:

Envoyé par mafooley

Alors, petit update, le code fonctionne impeccable dans le visualisateur de VS Code, mais si j'ouvre la page dans un navigateur (j'ai essayé Chrome, Edge et IE) ça ne fonctionne plus.

Tu ne peux pas tester hors serveur, le protocole file:/// va te générer une erreur :

sur FireFox :

Citation:

Uncaught DOMException: Permission denied to access property "ajusteIframe" on cross-origin object

ou Chrome :

Citation:

Uncaught SecurityError: Failed to read a named property 'ajusteIframe' from 'Window': Blocked a frame with origin "null" from accessing a cross-origin frame.

Ouvre la console du navigateur, touche F12, pour voir les erreurs.
08/10/2024, 06h40
mafooley

1 pièce(s) jointe(s)

Hello,

voici l'erreur que j'ai sur la console du navigateur :

Pièce jointe 660249

C'est du charabia pour moi... ;)
08/10/2024, 08h40
mathieu

comme en parlaient gabi7756 et NoSmoking, il faut passer par un serveur http pour faire cela. cela ne peux pas fonctionner si vous ouvrez directement les fichiers dans le navigateur.

est ce que vous faites juste des tests techniques pour voir ce qu'il est possible de faire ? ou alors vous avez un projet d'application ?
je demande cela parce que maintenant en javascript, il est possible de faire beaucoup de chose dans une même page. donc si vous nous expliquez ce que vous souhaitez faire, on pourra peut-être trouver un moyen de ne pas utiliser de frame.
08/10/2024, 23h25
mafooley

Bonjour, merci pour la réponse.
Alors les deux. Je fais des test pour voir ce qu'il est possible de faire pour un projet d'application. J'ai chargé les fichiers sur mon espace web IONOS et effectivement ça fonctionne.
Maintenant, ce à quoi je voulait accéder reste esthétique et ne dérange en rien le fonctionnement de l'application.
Il n'y a qu'en se posant des questions que l'on apprend ;)
Merci a tous pour l'aide apporté.
a+