Modification de CSS iFrame via JS

**mafooley** · 01/10/2024, 06h53

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**gabi7756** · 01/10/2024, 11h57

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

**mafooley** · 02/10/2024, 00h53

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.

J'ai une page index.html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :
Nom : vue.jpg
Affichages : 218
Taille : 36,9 Ko

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

merci

**mafooley** · 02/10/2024, 02h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

je sèche...

**gabi7756** · 02/10/2024, 10h18

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**mafooley** · 03/10/2024, 01h32

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Modification de CSS iFrame via JS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager