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 : 169
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 : 128
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