page mère/page fille : exécuter du code js dans la page fille

**laurentg2003** · 24/03/2011, 22h15

je pense que tu devrais prendre un papier ,un crayon à papier et une gomme
et te demander ce que ton application doit faire et écrire un algorithme parce que la de toute façon même si tu arrive à faire fonctionner tout ça
tu auras un code source à problème
mais suis donc nadox ça m'a lair trés bon et utilise event

**laurentSc** · 24/03/2011, 22h28

Merci nadox, je vais essayer ça et je vous tiens au courant, mais laurentg2003, c'est quoi event ? (un "événement js, comme "onchange" ?) et ai-je raison de penser qu'il faut mettre tout le html dans des "document.write" pour ne pas interrompre le script ?

**Willpower** · 24/03/2011, 22h42

Non.

**laurentSc** · 24/03/2011, 22h46

Non, pour event ou pour document.write ?

**laurentSc** · 24/03/2011, 22h57

Et autre souci : même si on comprend bien ce que je veux faire, j'ai mis cette boucle dans le select :

Code :

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

1
2
3
		for (i=0;i<nb_files;i++) {
			document.write('<option value="+i+">filevideo[')+i+document.write(']</option>');
			}

et le i n'est pas affiché (et je pense que le value est mauvais aussi) ; comment faire ?
(j'ai déjà un code js qui affecte à chaque filevideo[i] une chaîne de caractères contenant le nom du fichier video).

**Willpower** · 24/03/2011, 23h07

Envoyé par laurentSc

Et autre souci : même si on comprend bien ce que je veux faire, j'ai mis cette boucle dans le select :

Code :

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

1
2
3
		for (i=0;i<nb_files;i++) {
			document.write('<option value="+i+">filevideo[')+i+document.write(']</option>');
			}

et le i n'est pas affiché (et je pense que le value est mauvais aussi) ; comment faire ?
(j'ai déjà un code js qui affecte à chaque filevideo[i] une chaîne de caractères contenant le nom du fichier video).

il manque des '

Code :

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

1
2
3
		for (i=0;i<nb_files;i++) {
			document.write('<option value="'+i+'">filevideo[')+i+document.write(']</option>');
			}

**Willpower** · 24/03/2011, 23h13

Envoyé par laurentSc

Non, pour event ou pour document.write ?

désolé pour la réponse non claire et non constructive ! je parlais du document.write

Envoyé par laurentSc

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

pour attendre que le div soit créé, il suffit de placer ton script après la création de ton div comme je l'ai montré :

Code html :

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

1
2
3
4
5
6
<body>
<div id="monId">blabla</div>
<script type="text/javascript">
document.getElemementById('monId').innerHTML='autre chose';
</script>
</body>

ça fonctionne ! et si tu essayes de placer un script contenant un document.write dans ce div ça ne peut se faire que comme ça ! (sous IE) car après le window.onload (et donc après un certain timeout plus ou moins court.) le document.write ne fonctionnera plus. (de cette manière.)

les variables en javascript sont par défaut dites "globales" à la page, donc si tu as un autre morceau de script plus loin, tu devrais toujours y avoir accès.

en espérant t'avoir aidé.

**nadox** · 24/03/2011, 23h17

Ca serait pas plutôt :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<select id="idselect">
</select>
<script type="text/javascript">
var monSelect = document.getElementById("idselect");
for (i=0;i<nb_files;i++) {
var newOption = document.createElement("option");
newOption.value = i;
var newOptionTxt = document.createTextNode(filevideo[i]);
newOption.appendChild(newOptionTxt);
monSelect.appendChild(newOption);
}
</script>

Le non de Willpower concernait le "document.write()" je pense...
( bouhhhh.... c'est trop horrible cet entêtement à vouloir l'utiliser !

)

**laurentSc** · 24/03/2011, 23h39

car après le window.onload (et donc après un certain timeout plus ou moins court.) le document.write ne fonctionnera plus. (de cette manière.)

d'où le recours à un setTimeout...

les variables en javascript sont par défaut dites "globales" à la page, donc si tu as un autre morceau de script plus loin, tu devrais toujours y avoir accès.

Je ferai l'essai

Avec ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<select onchange="setVideoID(this.value)" id="idselect">
</select>
<script>
var monSelect = document.getElementById("idselect");
for (i=0;i<nb_files;i++) {
var newOption = document.createElement("option");
newOption.value = i;
var newOptionTxt = document.createTextNode(filevideo[i]);
newOption.appendChild(newOptionTxt);
monSelect.appendChild(newOption);
}
...

Le select est créé, mais complètement vide...

et avant, j'avais rajouté des quotes comme ça

Code :

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

1
2
3
		for (i=0;i<nb_files;i++) {
			document.write('<option value="'+i+'">filevideo[')+i+document.write(']</option>');
			}

mais le i n'était toujours pas affiché...

**Willpower** · 24/03/2011, 23h45

Envoyé par willpower

car après le window.onload (et donc après un certain timeout plus ou moins court.) le document.write ne fonctionnera plus. (de cette manière.)

Envoyé par laurentSc

d'où le recours à un setTimeout...

je parle une autre langue ? après un onload ou un setTimeout ça ne fonctionnera plus. il suffit donc de le mettre en direct dans le body après la déclaration complète (donc balise fermante comprise) de ton div en question.

Envoyé par laurentSc

et avant, j'avais rajouté des quotes comme ça

Code :

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

1
2
3
		for (i=0;i<nb_files;i++) {
			document.write('<option value="'+i+'">filevideo[')+i+document.write(']</option>');
			}

mais le i n'était toujours pas affiché...

je n'avais pas vu que tu avais aussi un deuxième i lui aussi mal placé. (carrément en dehors du document.write)

Code :

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

1
2
3
		for (i=0;i<nb_files;i++) {
			document.write('<option value="'+i+'">filevideo['+i+']</option>');
			}

**nadox** · 24/03/2011, 23h46

Que contient 'filevideo' exactement ? C'est possible de voir le code js qui le génère ? (pas du document.write j'espère....

)

**laurentSc** · 25/03/2011, 01h00

La génération de la table filevideo, je l'obtiens en décortiquant une chaîne de caractères qui contient le nom de tous les fichiers joints.
Cette chaîne est du type :

Code :

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

h_AttachmentNames='"nom_fichier1", "nom_fichier2", ...,"nom_fichierN"'

(et le nb_files, je l'obtiens en comptant les guillemets, divisé par 2)

Code :

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
function getallVIDEO(nb_files) {
i=1;
str=h_AttachmentNames;
/* recherche de chq fichier (i est le n° du fichier) */
/* substring
str="abcde" str.substring(1,3) = bc (1<->b et 3<->d)*/
var decal=0;
do {
//document.write('<br>deb boucle do<br>str='+str);
var ind_pguil=str.toLowerCase().indexOf("\"");
str_init=str; // on mémorise str avant de la transformer
str=str.substring(ind_pguil+1,str.length);
var ind_dguil=str.toLowerCase().indexOf("\"");
filevideo[i-1]=str_init.substring(ind_pguil+1,ind_dguil+1);// extraire le nom du fichier entre 2 guillemets
//document.write('<br>fichier='+filevideo[i-1]);
decal+=filevideo[i-1].length+4; /* Le décalage à faire est la longueur du nom du fichier 
+ 2 guillemets, une virgule et un espace */
/* on retire le nom du fichier : "nom_fichier",*/
if (i<nb_files) str=h_AttachmentNames.substring(decal,h_AttachmentNames.length);
} while (i++<=nb_files-1);
}

et les "document.write" sont tous en commentaires

(ouf)
et la fonction marche ; je viens de la (re)tester par

Code :

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

for (i=0;i<nb_files;i++) document.write('filevideo['+i+']='+filevideo[i]+'<br>');

il suffit donc de le mettre en direct dans le body après la déclaration complète (donc balise fermante comprise) de ton div en question.

Oui, mais si l'appel au script qui contient des document.write doit être dans le div, il faut bien faire un setTimeout...

et désolé, mais en enlevant les document.write et donc en interrompant le script js, ça ne marche plus ...

(alors que si je les laisse, ça marche).
Bon vu l'heure, j'arrête pour ce soir.
Mais je reprendrai demain ou ce WE (pas beaucoup de temps demain)

**Willpower** · 25/03/2011, 02h09

Envoyé par laurentSc

Oui, mais si l'appel au script qui contient des document.write doit être dans le div, il faut bien faire un setTimeout...

et désolé, mais en enlevant les document.write et donc en interrompant le script js, ça ne marche plus ...

(alors que si je les laisse, ça marche).

mais mais....

setTimeout ne fait qu'appeler une fonction avec du "retard" en laissant le reste du code s’exécuter.

or si tu rajoutes une balise "script" dans un div après le chargement complet de ta page. les document.write de cette balise "script" ne seront plus tolérés (et n'afficheront rien sous IE).

en dehors du fait que rajouter une balise "script" dynamiquement à un div est dégueulasse, d'autant plus pour rajouter un document.write.

pour faire ça "correctement", tu es obligé de le faire avant la fin de la création de ta page mais après la création de ton div. donc soit juste après ton div, soit en bas de page juste avant la fermeture de ta balise body. c'est encore le plus "propre".

parce que si ça marche sous IE avec ton setTimeout, c'est peut-être car ton site ou ta connexion internet ou autre lag suffisament pour mettre plus d'une second entre le déclenchement de ton setTimeout et la fin du chargement de ta page ... donc si t'as un visiteur qui ne lag pas, ça ne fonctionnera pas. :/
tu me diras qu'alors tu n'as qu'a régler ton timeout sur une milliseconde plutôt qu'une seconde mais dans ce cas pourquoi ne pas en mettre 0 et se passer carrément du setTimeout ? (qui ne sert à rien sauf à rendre ton document.write totalement invalide).

test ceci sur une page html vide (à copier entre les balises <body></body>)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
text avant le div
<script type="text/javascript">
function pagefille(){
  var script = document.createElement('script');
  script.text= "document.write('coucou');";
  document.getElementById('idDiv').innerHTML = ""; 
  document.getElementById('idDiv').appendChild(script);
}
document.write('<div id="idDiv">hello</div>');
pagefille();
</script>
text après le div

ça fonctionnera sous chrome + ie + firefox (et sans doute les autres)

maintenant test ceci (même code avec timeout) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
text avant le div
<script type="text/javascript">
function pagefille(){
  var script = document.createElement('script');
  script.text= "document.write('coucou');";
  document.getElementById('idDiv').innerHTML = ""; 
  document.getElementById('idDiv').appendChild(script);
}
document.write('<div id="idDiv">hello</div>');
setTimeout(pagefille,5000);
</script>
text après le div

après les 5 secondes de timeout :
IE: remplira le div par un script mais sans exécuter document.write (donc div vide)
Firefox et Chrome : remplaceront l'entierté du contenu de ta page par "coucou". (sans laisser le text d'avant et d'après ton div)

**Willpower** · 25/03/2011, 02h18

en fait, je n'arrive pas à comprendre comment ça peut fonctionner car même en mettant un timeout d'une milliseconde ça ne fonctionne pas chez moi. :/

sinon donne-nous ta page au complet, on va te refaire totalement, ça ira sans doute plus vite.

**laurentSc** · 25/03/2011, 08h34

sinon donne-nous ta page au complet, on va te refaire totalement, ça ira sans doute plus vite.

Ca je n'en doute pas, vu que vous êtes bien plus fort que moi. La proposition est très sympa, mais comme je suis dans un environnement un peu spécial, il y a plein de code à utiliser sans y toucher ; j'ai donc rajouté des commentaires.
L'idée générale : l'utilisateur peut joindre autant de fichiers (flv) qu'il veut ; le nom de ceux-ci seront dans la variable h_AttachmentNames. On lui propose une liste déroulante (le select) avec tous ces fichiers, et quand il en a sélectionné un, ça lance (à gauche de la liste déroulante) le lecteur flowplayer du fichier (il y a déjà le code pour lire un fichier, mais pour l'instant, c'est forcément le premier de la liste).

Code :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<html>
<head>
<title>Flash player form for QuickR version1.0fr =SE= Luc Raffestin All rights reserved le 17 fev 2011</title>
/*--- URL intranet (ressource du lecteur flowplayer) ---(Ne pas toucher) ---*/
<script type="text/javascript" src="http://qkrintra.schneider-electric.com/LotusQuickr/videotest/Main.nsf/h_Index/00F4B34971CE6AF78525785000584E51/$File/flowplayer.min.js"></script>
/*--- fin de ne pas toucher ---*/
 
</head>
<body>
/*--- ne pas toucher ---*/
<input type=hidden name=c_NameIsBanner>
<input type=hidden name=h_Name>
<script>
/*
var h_CurrentSkinType='h_Edit';
var c_NameIsBanner='';
var h_Name='';
*/
function QDK_HTMLForm_OnLoadHandlerCallback( theForm)
{
	// alert('pre');
	document.forms['h_PageUI'].c_getNameIsBanner.value=document.forms['h_PageUI'].c_NameIsBanner.value;
	document.forms['h_PageUI'].h_getName.value=document.forms['h_PageUI'].h_Name.value;	
}
function QDK_HTMLForm_OnSubmitHandlerCallback( theForm)
{
	document.forms['h_PageUI'].c_NameIsBanner.value=document.forms['h_PageUI'].c_getNameIsBanner.value;
	document.forms['h_PageUI'].h_Name.value=document.forms['h_PageUI'].h_getName.value;
 
 
	return true;
}
 
function nis()
{
	if (window.event.srcElement.value=='1') window.event.srcElement.value=''; else window.event.srcElement.value='1';
	// alert('nis '+window.event.srcElement.value+' name '+window.event.srcElement.name+ ' '+document.forms['h_PageUI'].c_getNameIsBanner.value);
}
 
function dbUrl()
{
	// alert(window.location.href);
	var iCmdStart = window.location.href.indexOf('.nsf');
	var sdbUrl="";
	if (iCmdStart != -1){
		sdbUrl= window.location.href.substring(0,iCmdStart+4);
	}
	// alert(sdbUrl);
	return sdbUrl;
}
 
function docUrl(){
 
	// alert(window.location.href);
	var iCmdStart = window.location.href.indexOf('?');
	var sURL=window.location.href;
	if (iCmdStart != -1)
	{
		if (window.location.href.charAt(iCmdStart-1) == '/')	
		{
			sURL = window.location.href.substring(0,iCmdStart-1);
		}
		else 
		{
			sURL = window.location.href.substring(0,iCmdStart);
		}
	}
	return sURL;
}
/*--- fin de ne pas toucher ---*/
 
// La fonction qui compte les caractères
function nbChar(chaine,lettre) {
var nb = 0;
chaine = chaine.split(lettre);
return chaine.length-1;
}
 
/* déclaration du tableau qui va contenir les noms de tableau (j'en ai mis 10 pour avoir de la marge, mais si on pouvait avoir un nombre variable égal à nb_files, ça serait mieux... */
filevideo=new Array(10);
 
// La fonction qui extrait le nom des fichiers joints
function getallVIDEO(nb_files) {
i=1;
str=h_AttachmentNames;
/* recherche de chq fichier (i est le n° du fichier) */
/* sustring
str="abcde" str.substring(1,3) = bc (1<->b et 3<->d)*/
var decal=0;
do {
//document.write('<br>deb boucle do<br>str='+str);
var ind_pguil=str.toLowerCase().indexOf("\"");
str_init=str; // on mémorise str avant de la transformer
str=str.substring(ind_pguil+1,str.length);
var ind_dguil=str.toLowerCase().indexOf("\"");
filevideo[i-1]=str_init.substring(ind_pguil+1,ind_dguil+1);// extraire le nom du fichier entre 2 guillemets
//document.write('<br>fichier='+filevideo[i-1]);
decal+=filevideo[i-1].length+4; /* Le décalage à faire est la longueur du nom du fichier 
+ 2 guillemets, une virgule et un espace */
/* on retire le nom du fichier : "nom_fichier",*/
if (i<nb_files) str=h_AttachmentNames.substring(decal,h_AttachmentNames.length);
} while (i++<=nb_files-1);
}
 
// La fonction qui récupère le premier fichier de la liste
function getVIDEO(){
    var sExt ="";
    var mExt = -1;
	var sAttachmentName;
 
	// Get the file name from the list
	var iExt = h_AttachmentNames.toLowerCase().indexOf(".flv");
    if (iExt > mExt) {mExt = iExt; sExt = ".flv";}
 
	if (mExt == -1)
	{
		// There is no file here
		sAttachmentName = "";
	}
	else
	{
		sAttachmentName = h_AttachmentNames.substring(0,mExt);
 
		// Remove string begining
		var iStart = sAttachmentName.lastIndexOf('"');
		// alert(sAttachmentName);
		if ( iStart != -1)
				sAttachmentName = sAttachmentName.substring(iStart+1);
	}
 
	return sAttachmentName+sExt;	
}
// alert(getVIDEO());
 
 
// La fonction qui lance le lecteur sur le premier fichier de la liste
function showVIDEO(){
	var sVIDEO = getVIDEO();
	var sFileName_Raw = docUrl() + "/%24FILE/" + sVIDEO // + "?OpenElement";
	var re = new RegExp(" ","gi");
	var sFileName = sFileName_Raw.replace(re,"%20");
	// alert(sFileName);
	if (sVIDEO!=""){
            document.write('<a id="player" class="player plain" style="float:left;margin-top:25px;display:block;width:320px;height:264px;" href="' + sFileName + '"></a>');
			flowplayer("player", "http://qkrintra.schneider-electric.com/LotusQuickr/videotest/Main.nsf/h_Index/00F4B34971CE6AF78525785000584E51/$File/flowplayer.swf");
	}
}
 
/*--- ne pas toucher ---*/
 
if (h_CurrentSkinType!='h_Edit') { 
/*--- fin de ne pas toucher ---*/
// Ici du code de moi
document.write('<table><tr><td>');
document.write('<div id="idDivParent">');
// deb div parent
 
document.write('</div>');
 
var nb_guillemets=nbChar(fieldNames.h_AttachmentNames,'"');
nb_files=nb_guillemets/2;
getallVIDEO(nb_files);
 
document.write('<select>')
		for (i=0;i<nb_files;i++) {
			document.write('<option value="'+i+'">'+filevideo[i]+'</option>');
			}
 
document.write('</select>')
 
//fin div parent
		document.write('</div></td><td width=50></td><td>');
document.write('</div><div id="idDivfille">');
	setTimeout(showVIDEO(),1000);
	document.write('</div></td></table>');
 
 
	}
 
/*--- ne pas toucher ---*/
</script>
<table border=0 width='100%'>
<tr>
 
	<script>
		if (h_CurrentSkinType=='h_Edit') {
			document.write("<td class='h-fieldHeaderEdit-bgtext'>");
			document.write("Titre<br><"+"input size='50' type='text' name='h_getName'>");
			if (c_NameIsBanner=='1') {
				document.write("<"+"input title='Show the title, author and date on page?' type='checkbox' CHECKED value='1' onclick='nis();' name='c_getNameIsBanner'>");
			} else {
				document.write("<"+"input title='Show the title, author and date on page?' type='checkbox' value='' onclick='nis();' name='c_getNameIsBanner'>");
			}
			document.write("<font size='1'>Show the title, author and date on page?</font>");
		} else {
			document.write("<td class='h-page-text'>");
			if (c_NameIsBanner=='1') {
				document.write('<b>'+h_Name+'</b>&nbsp; ');
				document.write("Last modified by: "+h_LastEditorDisplayName+"&nbsp; "); 
				document.write("<font size='1'>"+h_ModifiedDate+"</font>");
			} else {
				document.write(""); // &nbsp;
			} 
		}
	</script>
	</td>
</tr>
<tr>
	<td>	&nbsp;
	</td>
</tr>
<tr>
	<script>
		if(h_CurrentSkinType=='h_Edit') {
			document.write(	"<td class='h-fieldHeaderEdit-bgtext'>" );
		} else {
			document.write(	"<td class='h-page-text'>"); 
		}
	</script>
	<QUICKPLACECONTROL type="richtext" name="richtext">
	</td>
</tr>
<tr>
	<td>	&nbsp;
	</td>
</tr>
	<script>
		if(h_CurrentSkinType=='h_Edit') {
			document.write(	"<tr><td class='h-fieldHeaderEdit-bgtext'>" );
		} else {
			document.write("<tr><td class='h-page-text'>"); 
		}
	</script>
		<QUICKPLACECONTROL type='attachment' title='Attachements' 
			name='h_Attachments'>
	</td>
</tr>
</table>
</body>
</html>
/*--- fin de ne pas toucher ---*/

**laurentg2003** · 25/03/2011, 11h40

Tu devrais utiliser la poo sinon ton code va vite devenir une usine à gaz
avec un code genre celui ci :

Code :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
function Media(){
if((undefined!=arguments[0])&&(undefined!=arguments[1])&&(undefined!=arguments[2])){
this.oObject=document.createElement(arguments[0]);
this.oObject.setAttribute("src",arguments[1]);
this.oObject.setAttribute("id",arguments[2]);
if(arguments[0]=="EMBED"){
this.oObject.setAttribute("hidden","false");
this.oObject.setAttribute("autostart","true");
}
if(arguments[0]=="IFRAME"){
this.oObject.setAttribute("frameborder","10");
 
}
 
 
 
this.getObject=function(){
return this.oObject;
}
 
this.setSize=function(){
x=arguments[0];
y=arguments[1];
this.oObject.setAttribute("width",x);
this.oObject.setAttribute("height",y);	
}
this.insertObject=function(){
id=arguments[0];
id.appendChild(this.oObject);
}
}
}
 
 
function image(tag,url,id){
Media.call(this,tag,url,id);
 
 
}
function video(tag,url,id){
Media.call(this,tag,url,id);
 
}        
function iframe(){
Media.call(this,tag,url,id);
 
// voir classe Iframe spécialisé
 
}<body>
 
<script type="text/javascript">
 
function static_void_Main(){
//media= new Media("img","imageTest.jpg","idImageToLoad");
 
image.prototype=new Media();
img = new image("img","imageTest.jpg","idImageToLoad");
 
oObjectInMedia= img.getObject();
oObjectInMedia.onload=function(){alert("object is loaded");}
var idLoadImage=document.getElementById("loadImage");				
		img.setSize(400,300); 
        img.insertObject(idLoadImage);
 
 
video.prototype=new Media();
vid = new video("EMBED","test.flv","idVideoToLoad");
 
oObjectInMedia= vid.getObject();
oObjectInMedia.onload=function(){alert("object is loaded");}
var idLoadVideo=document.getElementById("loadVideo");				
		vid.setSize(400,300); 
        vid.insertObject(idLoadVideo);		
 
 
iframe.prototype=new Media();
ifr = new iframe("IFRAME","index.htm","idIframeToLoad");
 
oObjectInMedia= ifr.getObject();
oObjectInMedia.onload=function(){alert("object is loaded");}
var idLoadIframe=document.getElementById("loadIframe");				
		ifr.setSize(400,300); 
        ifr.insertObject(idLoadIframe);				
 
}             	
 
var eventObj=new Event();
eventObj.addListener(window,'load',static_void_Main);

le tout adapté au plug in flash coté IE tu as le swfObject

Un truc à eviter ce sont les closures je vais tout réécrire en notation JSON genre prototype car il y a des fuites de mémoires avec le dom et les getElementXXXX c'est le garbage collector de IE le soucis...

Sinon event c'est l'objet généré par le navigateur à chaque évenement et donc tu l'intercepte
c'est le dom level 2 ça permet d'eviter les gestionnaires d'évenements dans le html et de placer plusieurs événement sur un même objet balise id etc
le code pour placer un événement compatible FF IE

Code :

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
function Event(){ 
this.addListener=function(element,baseName,nameFunction){
 
 
if(element.addEventListener){
element.addEventListener(baseName,nameFunction,false);
}
else if(element.attachEvent){
element.attachEvent('on'+baseName,nameFunction);
}
else{
 
alert("ce navigateur ne reconnait pas l'objet event");
}
}
}

et dans le body
function FonctionQuandLaPageEstChargée(){

// code

}
var eventObj=new Event();
eventObj.addListener(window,'load',FonctionQuandLaPageEstCharge);

ça remplace le window.onload= FonctionXXX
et tu peux sans soucis faire
var eventObj=new Event();
eventObj.addListener(window,'autre evenement',autre fonction);
Ensuite tu peux faire un controleur genre MVC

Code :

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

1
2
3
4
5
6
var eventSrc = event.target ? event.target : event.srcElement;
f((event.type=="click")&&(eventSrc.getAttribute("id")=="nom de mon id")){
 
code qui s'exécutera
 
}

Voilà J'espere avoir bien répondu à ta question

**laurentSc** · 25/03/2011, 15h03

J'avoue ne pas comprendre grand chose à ta réponse Laurentg2003 (et dommage car elle est assez longue) . Par contre, tu as raison de me conseiller d'utiliser la poo. Et même si je ne l'ai jamais fait dans aucun langage, j'y suis sensibilisé et ça sera sûrement possible.
Et rien compris non plus à tes explications sur event (faux, car je viens, en reprenant ton code de reproduire window.onload, mais je n'ai pas compris la partie sur le contrôleur MVC)

**laurentg2003** · 25/03/2011, 19h30

J'avoue que mon code est assez nébuleux si tu fais pas de poo
et je ne suis pas le roi du commentaire j'avoue

MVC c'est un modele de conception
http://fr.wikipedia.org/wiki/Mod%C3%...ontr%C3%B4leur
et en javaScript avec du code comme plus haut béh tu intercepte toutes les actions de l'utilisateur et tu envois la page demandé ou bien un menu déroulant n'importe quoi en fait et c'est un moyen de séparer le code client du modele (les objets metiers) et donc de la base de donnée et donc du code serveur
evidement il y a un moteur de templates qui gere les vues en HTML
tout est séparé donc et le controleur est le pivot de tout ça
La poo et mvc permettent d'avoir une architecture logiciel clair et structuré
Cela dit va pas croire que j'applique toujours tout ça
pour une petite appli tu peux faire du JS procédural sans mvc même si quand tu fais de la poo tu deviens vite incapable de faire autre chose c'est une maniere de penser le code
et si tu fais un diagramme de classe avec UML et la base avec Merise et bien là tu sais ou tu vas mais c'est plus le sujet du topic et il y a de trés bon tuto et articles sur tout ça sur ce site!

**laurentSc** · 25/03/2011, 22h33

UML (Unified Modelling Language je crois), je l'avais utilisé une fois fin des années 90 pour un code en C, mais jamais retouché depuis...Comme la POO (en js comme ds un autre langage) je n'ai jamais pratiqué, pour voir comment ça se passe, j'ai jeté un oeil sur un article trouvé sur Internet ; mais honnêtement, je ne vois pas ce que je vais gagner en clarté/maintenabilité, car mes fonctions vont devenir des méthodes d'un objet "video", mais ça ne va rien changer : j'attends d'être convaincu du contraire...

**nadox** · 25/03/2011, 22h43

Code :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
 
<html>
<head>
<title>Flash player form for QuickR version1.0fr =SE= Luc Raffestin All rights reserved le 17 fev 2011</title>
/*--- URL intranet (ressource du lecteur flowplayer) ---(Ne pas toucher) ---*/
<script type="text/javascript" src="http://qkrintra.schneider-electric.com/LotusQuickr/videotest/Main.nsf/h_Index/00F4B34971CE6AF78525785000584E51/$File/flowplayer.min.js"></script>
/*--- fin de ne pas toucher ---*/
 
<script type="text/javascript">
/**
 * ici on va avoir toute nos fonctions/variables utiles
 * il est possible de tout mettre dans un fichier js séparé et mettre une balise comme ci-dessus...
 * Par contre, il faut peut-être revoir le besoin exact, car il semblerais que flowplayer puisse gérer une playlist...(donc pourquoi réinventer la roue ?)
 */
 
/** GLOBALES (à la page, toute variable déclarée en dehors d'une fonction est globale) */
var videoFiles=new Array(); // pas besoin de préciser la taille, les tableaux sont dynamique en javascript(grâce à push() et pop()).
var nbFiles=0; // utile pour les boucles
var i=0; // idem
 
/** FONCTIONS */
 
/**
 * Extrait le nom des fichiers joints pour alimenter le tableau global
 */
function splitVideoFilesString() {
	// on rempli un tableau avec tout les noms en utilisant la virgule comme séparateur et en enlevant les guillemets.
	var str = h_AttachmentNames.replace(/"/g,""); // enleve les doubles guillemets
	var splittedNames = str.split(/[,]+/); // la on a donc un tableau contenant tous les noms de fichiers.
	//alert(splittedNames.join(" | "));
	var tmpName = ""; // utile pour vérifier l'extension dans la boucle.
	nbFiles = splittedNames.length; // au passage, on positionne le nombre de fichier dans la globale qui sert à ça.
	for (i=0;i<nbFiles;i++)
	{
		tmpName = splittedNames[i].replace(/^\s+/g,'').replace(/\s+$/g,''); // on enleve les espaces de début et de fin eventuels
		//alert(tmpName);
		if (tmpName.indexOf(".flv") != -1) // il s'agit bien d'un nom de fichier flv valide ?
			videoFiles.push(tmpName); // on l'insère dans le tableau global.
	}
	nbFiles = videoFiles.length; // pour être sûr d'avoir le nouveau nombre d'éléments si un nom de fichier n'était pas valide.
}
 
/**
 * Construit la structure du DOM utile au player (à base de tables ! beurk :) )
 */
function initVideoDOM()
{
	var container = document.createElement("div");
		container.setAttribute("id","container");
 
	var table = document.createElement("table");
	var tr = document.createElement("tr");
	var td = document.createElement("td");
	var divParent = document.createElement("div");
		divParent.setAttribute("id","idDivParent");
	var divFille = document.createElement("div");
		divFille.setAttribute("id","idDivFille");
	var aFlowPlayer = document.createElement("a"); // le lien qui contiendra le lecteur flash.
		aFlowPlayer.setAttribute("id","flowplayer-container");
		aFlowPlayer.style.float="left";
		aFlowPlayer.style.marginTop = "25px";
		aFlowPlayer.style.display = "block";
		aFlowPlayer.style.width = "320px";
		aFlowPlayer.style.height = "264px";
	divFille.appendChild(aFlowPlayer);
	td.appendChild(divParent);
	td.appendChild(divFille);
	tr.appendChild(td);
	table.appendChild(tr);
 
	container.appendChild(table);
	if (document.body.firstChild){ // si le body n'est pas vide on injecte notre DOM au début
		document.body.insertBefore(container, document.body.firstChild);
	} else { // sinon on l'injecte dedans...
		document.body.appendChild(container);
	}
}
 
/**
 * Construit en DOM le select permettant de choisir la video
 */
function initVideoList()
{
	var divParent = document.getElementById("idDivParent");
	var videoSelect = document.createElement("select");
	for (i=0;i<nbFiles;i++)
	{
		var newOption = document.createElement("option");
			newOption.value = i;
		var newOptionTxt = document.createTextNode(videoFiles[i]);
			newOption.appendChild(newOptionTxt);
		videoSelect.appendChild(newOption);
	}
	divParent.appendChild(videoSelect);
	// on assigne sur l'évennement onchange un appel à la fonction qui permet de lancer le player avec une video
	videoSelect.onchange = function() 
	{
		//console.log("videoSelect value : "+videoSelect.value+" | nom du fichier :"+videoFiles[videoSelect.value]);
		showVideo(videoSelect.value);
	}
	showVideo(videoSelect.value); // on prends la première video pour initialiser le lecteur la première fois.
}
 
/**
 * Lance le lecteur avec un fichier sélectionné grace un index du tableau global videoFiles.
 */
function showVideo(index)
{
	var sVIDEO = videoFiles[index];
	var sFileName_Raw = docUrl() + "/%24FILE/" + sVIDEO // + "?OpenElement";
	var re = new RegExp(" ","gi");
	var sFileName = sFileName_Raw.replace(re,"%20");
	//console.log(sVIDEO);
	if (sVIDEO!=""){
		// on récupère le lien conteneur en DOM et on modifie l'URL du fichier.
		document.getElementById("flowplayer-container").href = sFileName;
		// on lance le player avec le nouveau lien.
		flowplayer("flowplayer-container", "http://qkrintra.schneider-electric.com/LotusQuickr/videotest/Main.nsf/h_Index/00F4B34971CE6AF78525785000584E51/$File/flowplayer.swf");
		// il semble que le player puisse gérer une playlist... donc je crois que je viens de réinventer la roue ! :'(
		// ici on réinstancie le flowplayer à chaque fois !
	}
}
if (h_CurrentSkinType!='h_Edit') { 
/*--- fin de ne pas toucher ---*/
	// Aïe je comprends mieux les document.write... donc on va faire ça en DOM sur l'évennement onload de la page !
	window.onload = function() {
		splitVideoFilesString(); // on récupère les noms de fichier.
		initVideoDOM(); // on écrit le DOM utile à tout ça au début du body
		initVideoList(); // on construit la liste avec les noms de fichier.
	};
	// il faut noter que ici j'assigne directement une fonction sur l'évènement onload de la page.
	// comme l'indique laurentg2003, ce n'est pas très propre.
	// si un autre script fait la même chose dans la même page, le dernier l'ayant fait écrasera l'autre.
}
</script>
</head>
<body>
/*--- ne pas toucher ---*/
<input type=hidden name=c_NameIsBanner>
<input type=hidden name=h_Name>
<script>
/*
var h_CurrentSkinType='h_Edit';
var c_NameIsBanner='';
var h_Name='';
*/
function QDK_HTMLForm_OnLoadHandlerCallback( theForm)
{
	// alert('pre');
	document.forms['h_PageUI'].c_getNameIsBanner.value=document.forms['h_PageUI'].c_NameIsBanner.value;
	document.forms['h_PageUI'].h_getName.value=document.forms['h_PageUI'].h_Name.value;	
}
function QDK_HTMLForm_OnSubmitHandlerCallback( theForm)
{
	document.forms['h_PageUI'].c_NameIsBanner.value=document.forms['h_PageUI'].c_getNameIsBanner.value;
	document.forms['h_PageUI'].h_Name.value=document.forms['h_PageUI'].h_getName.value;
 
 
	return true;
}
 
function nis()
{
	if (window.event.srcElement.value=='1') window.event.srcElement.value=''; else window.event.srcElement.value='1';
	// alert('nis '+window.event.srcElement.value+' name '+window.event.srcElement.name+ ' '+document.forms['h_PageUI'].c_getNameIsBanner.value);
}
 
function dbUrl()
{
	// alert(window.location.href);
	var iCmdStart = window.location.href.indexOf('.nsf');
	var sdbUrl="";
	if (iCmdStart != -1){
		sdbUrl= window.location.href.substring(0,iCmdStart+4);
	}
	// alert(sdbUrl);
	return sdbUrl;
}
 
function docUrl(){
 
	// alert(window.location.href);
	var iCmdStart = window.location.href.indexOf('?');
	var sURL=window.location.href;
	if (iCmdStart != -1)
	{
		if (window.location.href.charAt(iCmdStart-1) == '/')	
		{
			sURL = window.location.href.substring(0,iCmdStart-1);
		}
		else 
		{
			sURL = window.location.href.substring(0,iCmdStart);
		}
	}
	return sURL;
}
/*--- fin de ne pas toucher ---*/
 
// piouf :D
 
/*--- ne pas toucher ---*/
</script>
<table border=0 width='100%'>
<tr>
 
	<script>
		if (h_CurrentSkinType=='h_Edit') {
			document.write("<td class='h-fieldHeaderEdit-bgtext'>");
			document.write("Titre<br><"+"input size='50' type='text' name='h_getName'>");
			if (c_NameIsBanner=='1') {
				document.write("<"+"input title='Show the title, author and date on page?' type='checkbox' CHECKED value='1' onclick='nis();' name='c_getNameIsBanner'>");
			} else {
				document.write("<"+"input title='Show the title, author and date on page?' type='checkbox' value='' onclick='nis();' name='c_getNameIsBanner'>");
			}
			document.write("<font size='1'>Show the title, author and date on page?</font>");
		} else {
			document.write("<td class='h-page-text'>");
			if (c_NameIsBanner=='1') {
				document.write('<b>'+h_Name+'</b>&nbsp; ');
				document.write("Last modified by: "+h_LastEditorDisplayName+"&nbsp; "); 
				document.write("<font size='1'>"+h_ModifiedDate+"</font>");
			} else {
				document.write(""); // &nbsp;
			} 
		}
	</script>
	</td>
</tr>
<tr>
	<td>	&nbsp;
	</td>
</tr>
<tr>
	<script>
		if(h_CurrentSkinType=='h_Edit') {
			document.write(	"<td class='h-fieldHeaderEdit-bgtext'>" );
		} else {
			document.write(	"<td class='h-page-text'>"); 
		}
	</script>
	<QUICKPLACECONTROL type="richtext" name="richtext">
	</td>
</tr>
<tr>
	<td>	&nbsp;
	</td>
</tr>
	<script>
		if(h_CurrentSkinType=='h_Edit') {
			document.write(	"<tr><td class='h-fieldHeaderEdit-bgtext'>" );
		} else {
			document.write("<tr><td class='h-page-text'>"); 
		}
	</script>
		<QUICKPLACECONTROL type='attachment' title='Attachements' 
			name='h_Attachments'>
	</td>
</tr>
</table>
</body>
</html>
/*--- fin de ne pas toucher ---*/

page mère/page fille : exécuter du code js dans la page fille

JavaScript

Discussions similaires

Partager

Partager