page mère/page fille : exécuter du code js dans la page fille [Résolu]

[laurentSc]

Bonjour,

ceci est en fait la suite de ce fil, mais j'en fais un nouveau car 1) le titre ne convient plus et 2) j'avais coché le précédent comme "résolu".
Ce que je voudrais faire, c'est en fonction de l'action faite dans la page mère, exécuter une certaine fonction js dans la page fille. Or si je mets du code html dans la page fille, ça marche bien, mais si j'y mets du code js, au lieu de l'exécuter, ça affiche le code. Donc je recherche une solution.
Le code qui marche (html dans la page fille) :

Code :

1
2
3
4
5
6
7
8
9
10
11
<script>
function pagefille() {
document.getElementById("idDiv").innerHTML = "coucou";
}
 
document.write('<div id="idDivParent">');
 
setTimeout(pagefille,1000);
 
document.write('</div><div id="idDiv"></div>');
</script>

Le code qui échoue (js dans la page fille) :

Code :

1
2
3
4
5
6
7
8
9
10
11
<script>
function pagefille() {
document.getElementById("idDiv").innerHTML = "<script>document.write('coucou');</script>";
}
 
document.write('<div id="idDivParent">');
 
setTimeout(pagefille,1000);
 
document.write('</div><div id="idDiv"></div>');
</script>

Comment puis-je faire ?

[SpaceFrog]

déja document.write ...

ensuite

Code :

 "<script>document.write('coucou');</script>";

compris comme balise de fermeture de ton script
=>

Code :

1
2
 "<script>document.write('coucou');</s" +"cript>";
}

mais il est préférable de passer par le DOM ...

[Willpower]

document.getElementById("idDiv").innerHTML = "<script>document.write('coucou');</script>";

Code :

1
2
3
4
5
6
7
8
var s = document.createElement('script');
s.type = "text/javascript";
if(!!s.textContent)
  s.textContent = "document.write('coucou');";
else
  s.innerText  = "document.write('coucou');";
document.getElementById("idDiv").innerHTML = ""; // pour vider le div
document.getElementById("idDiv").appendChild(s);

[laurentSc]

Merci pour les réponses ; du coup, j'ai essayé ça :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
function pagefille() {
var s = document.createElement('script');
s.type = "text/javascript";
if(!s.textContent)
  s.textContent = "document.write('coucou');";
else 
  s.innerText  = "document.write('coucou');";
document.getElementById("idDiv").innerHTML = ""; // pour vider le div
document.getElementById("idDiv").appendChild(s);}
 
document.write('<div id="idDivParent">');
 
setTimeout(pagefille,1000);
 
document.write('</div><div id="idDiv"></div>');
</script>

mais il ne se passe rien...(page blanche)

et j'ai aussi essayé ça :

Code :

1
2
3
4
5
6
7
8
9
10
11
<script>
function pagefille() {
 document.getElementById("idDiv").innerHTML ="<script>document.write('coucou');</s" +"cript>";
}
 
document.write('<div id="idDivParent">');
 
setTimeout(pagefille,1000);
 
document.write('</div><div id="idDiv"></div>');
</script>

Pas mieux...

[SpaceFrog]

c'est pas très clair tout ça
il faudrait préciser sur quelle page se trouve le script et depusi quelle page tu essaye de le lancer ..

[Willpower]

au temps, pour moi, je ne l'avais pas testé ! voici la bonne version :

Code :

1
2
3
4
var script = document.createElement('script');
script.text= "document.write('coucou');";
document.getElementById("idDiv").innerHTML = ""; // pour vider le div
document.getElementById("idDiv").appendChild(script);

[SpaceFrog]

répandu ... avec un A will

[Willpower]

Envoyé par SpaceFrog

répandu ... avec un A will

[laurentSc]

voici la bonne version

Ca marche chez toi ? Pas chez moi.
et voici mon code (pour plus de clarté, j'ai renommé le div "fille") :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
function pagefille() {
var script = document.createElement('script');
script.text= "document.write('coucou');";
document.getElementById("idDivfille").innerHTML = ""; // pour vider le div
document.getElementById("idDivfille").appendChild(script);
}
 
document.write('<div id="idDivParent">');
 
setTimeout(pagefille,1000);
 
document.write('</div><div id="idDivfille"></div>');
</script>

Et il fait quoi ce script imbittable le plus répandu ?

[laurentSc]

L'idée globale est de demander à l'utilisateur de faire un choix côté page mère, et en fonction de ce choix de lancer la fonction js correspondante côté fille, d'où la nécessité d'exécuter du js côté fille.

[SpaceFrog]

ben je ne vois rien de sorcier là dedans je ne comprends pas poruquoi tu essaye de rediger les fonctions avec document.write ???

suffit que tes fonction soient deja sur la page et tu les appelles

[laurentSc]

Mon idée est d'avoir 2 DIV ; dans le premier, l'utilisateur fait un choix, ce qui positionne une variable js (donc le premier div contient un script js), et selon la valeur de cette variable, on lance une certaine fonction (js) dans l'autre div (en fait, toujours la même fonction à laquelle on passe en paramètre la variable fixée par l'utilisateur). D'où l'idée de la notion mère/fille. Mais si tu as autre chose à me proposer, je suis preneur.

[SpaceFrog]

Ce n'est pas la notion mère fille que je conteste ...
c'est pourquoi tu essaye d'ecrire les fonctions dynamiquement ???
tu peux pas plus simplement avoir les fonctions sur l'une ou l'autre page et le appeler ???

[Willpower]

Envoyé par laurentSc

Ca marche chez toi ? Pas chez moi.
et voici mon code (pour plus de clarté, j'ai renommé le div "fille") :

Code :

je n'avais pas vu ton setTimeout, je n'avais pas bien regardé mais tu as créé le pire code JS que je n'ai jamais vu.

en fait, ça ne fonctionne pas (sous IE) car avec ton timeout, la fonction s'éxecute après le chargement de la page (window.onload) et donc les document.write sont interdits. (mais si tu le remplace par un "alert('coucou');" par exemple, ça fonctionne).

ensuite ça ne sert à rien de placer ton setTimeout entre la balise ouvrante et fermante d'un div.

Code :

1
2
3
4
5
document.write('<div id="idDivParent">');
 
setTimeout(pagefille,1000);
 
document.write('</div><div id="idDivfille"></div>');

puisque que le settimeout signifie que ton code sera exécuté plus tard.

Code :

1
2
document.write('<div id="idDivParent"></div><div id="idDivfille"></div>');
setTimeout(pagefille,1000);

bien que je ne vois pas non plus l'intérêt du document.write plutôt que de l'écrire en html :

Code html :

1
2
3
4
5
6
<body>
<div id="idDivParent"></div><div id="idDivfille">
<script>
setTimeout(pagefille,1000);
</script>
</body>

enfin, si ton settimeout ne servait qu'a s'assurer que le div était deja créé, alors il suffit de placer le code après (ou dans window.onload mais surtout pas dans ce cas présent puisque ta fonction pagefille appelle document.write) :

Code html :

1
2
3
4
5
6
<body>
<div id="idDivParent"></div><div id="idDivfille">
<script>
pagefille();
</script>
</body>

là, c'est dejà beaucoup plus propre.

Envoyé par laurentSc

Et il fait quoi ce script imbittable le plus répandu ?

ça n'a rien à voir avec le poste, c'est ma signature qui est là pour me rebeller contre les membres de ce forum qui critiquent le document.write à tout va ! (en fait si, ça a tout avoir avec ce sujet^^) alors que bien utilisé(càd lors de la création du dom, avant donc le window.onload), il a tout a fait sa place dans javascript.

edit: le script en question, c'est google adsense.

[laurentg2003]

pourquoi tu utilise pas une iframe si c'est pour google adense
tu exécute ton code sur ta page mere et via l'url de l'iframe tu l'envois sur ta page fille et tu récupere via php
et via php mavarJavascript="<?php echo maVarRecupere ?>";
au bien
tu créé une classe coté page principale qui fait ce que tu veux faire
Tes membres tes méthodes etc
ensuite tu créé une fonction mafonction
dans maFonction tu créé ton instance

Code :

1
2
3
4
5
6
7
8
 
function maFonction(){ 
var monObjet=new MaClasseQuiFaitCeQueJeveux();
   var value=  monObjet.maMethodeQuiRetourneLaValeurVoulue();  
return mavalue
}
ta page fille est une iframe evidement 
et la var maValueRecupere= new window.parent.maFonction();

Voilà bien sur c'est à vue de nez aprés tu peux créer plusieurs objets etc utiliser call et aplly pour rérecuperer les valeurs que tu veux
n'oublie pas de definir document.domain sur tes pages
et pour envoyer une fonction il y a aussi le cross domain
mais oublie document.write() vraiment même si ton script fonctionne ça sera un script de m... ingérable et oublie window.onload
et pour setTimeout(pagefille,1000);
c'est plutot setTimeout("pagefille",1000);
Bonne soirée

[nadox]

Je crois que la notion mère/fille n'est pas vraiment adaptée ? Les divs ne sont pas des pages. Dans le fil précédent, tu as abandonné les iframe parce qu'il fallait tout le code sur la même page... c'est le cas !
Le "document.write()" oblige à écrire à l'endroit ou se positionne le script.
Mais ce que tu ne semble pas savoir : tu peux exécuter des fonctions javascript après le chargement de la page ! Et ces fonctions peuvent modifier le contenu de la page (ici ta div fille) !

Essaie donc ce code :

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
29
30
31
32
33
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<script type="text/javascript" src="masuperlibrairiepourlesvideos.js"></script>
<script type="text/javascript">
var videoID = 1; // globale pour les deux divs (oui le véritable parent on est déjà dessus, les div ne sont pas des pages ! )
var videoObject; // idem
 
// fonction 'interne'(je dirais plutôt dédiée) à la div parent
function setVideoID(newID)
{
	videoID = newId;
	showVideo(); // ou maSuperFonction(newID);...(et là plus besoin de globales !)
}
 
// fonction 'interne'(je dirais plutôt dédiée) à la div fille
// devra être remplacé par l'appel à la fonction voulue...
function showVideo()
{
	document.getElementById("idDivFille").innerHTML = "vous avez choisi la video "+videoID; // ou videoObject = maSuperFonction(videoID);
}
</script>
</head>
<body>
	<div id="idDivParent">
		<input type="radio" name="selection" onclick="setVideoID(1);">Video 1
		<input type="radio" name="selection" onclick="setVideoID(2);">Video 2
		<input type="radio" name="selection" onclick="setVideoID(3);">Video 3
	</div>
	<div id="idDivFille"></div>
</body>
</html>

[laurentSc]

Quelques éléments de réponse :

• Laurentg2003 : mon environnement m'interdit le PHP et nécessite que tout le code soit dans un seul fichier, donc une iframe...(même si c'était mon idée initiale)

• Willpower : le setTimeout, il sert à attendre que le div soit créé, et si je l'enlève, ça ne marche plus.
  Les "document.write" qui enserrent du code html, ça sert à ne pas interrompre le script, sinon, les variables sont perdues, donc, si je rouvre un nouveau script plus loin, les anciennes variables ne sont plus connues

• Spacefrog :
  

  tu peux pas plus simplement avoir les fonctions sur l'une ou l'autre page et le appeler ???

  Pourquoi faire simple, quand on peut faire compliqué ? (cela vient de l'idée que j'avais au début). Cela dit, comme je le dis plus haut, je crois que je devrai encapsuler tout le html dans des "document.write" afin de ne pas interrompre le script : ai-je raison ?

[nadox]

Quel est cet environnement ? Ce n'est pas une page HTML ? Je suis complétement perdu dans les explications et le but recherché :s

[laurentSc]

Quand j'ai fait ma réponse ci-dessus, je n'avais pas vu les réponses de nadox, mais je vais essayer de m'en inspirer ; par contre, le nombre de videos est variable. Je peux le calculer en ligne et le mettre dans une variable js. Du coup, le div parent va contenir une boucle js dont la longueur dépendra de cette variable.
Par contre, une question au sujet de la div parent : plutôt que des boutons radio, je voudrais faire une liste déroulante (un select). Mon idée serait de remplacer chaque <input type="radio"... par un <option value=... , y mettre comme ici des onclick et ne pas mettre d'action (<form action=""> et pas de bouton submit). Est-ce que ça tient la route ?

Et pour l'environnement, c'est un peu compliqué : en fait, ça va être de l'intranet ; je suis sur un outil interne qui utilise Quickr (IBM made), et cet outil permet de développer ce qu'on appelle des scripts html (en fait, on y met du code html et du js) ; c'est ce que je fais mais tout doit être réuni dans une seule page.

[nadox]

Pour le select, il suffit de remplacer

Code :

1
2
3
4
 
		<input type="radio" name="selection" onclick="setVideoID(1);">Video 1
		<input type="radio" name="selection" onclick="setVideoID(2);">Video 2
		<input type="radio" name="selection" onclick="setVideoID(3);">Video 3

par

Code :

1
2
3
4
5
6
 
		<select onchange="setVideoID(this.value);">
			<option value="1">Video 1</option>
			<option value="2">Video 2</option>
			<option value="3">Video 3</option>
		</select>

dans mon exemple.