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