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

**gabi7756** · 03/10/2024, 08h51

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

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

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

**NoSmoking** · 03/10/2024, 09h52

Bonjour,

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

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 :

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

ou Chrome :

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.

**mafooley** · 08/10/2024, 06h40

Hello,

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

Nom : erreur.jpg
Affichages : 189
Taille : 10,5 Ko

C'est du charabia pour moi...

**mathieu** · 08/10/2024, 08h40

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.

**mafooley** · 08/10/2024, 23h25

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+

Modification de CSS iFrame via JS

JavaScript

Discussions similaires

Partager

Partager