document.write avec Google Chrome + script js

[homer3018]

Bonjour,

je débute en html + script js, d'ailleurs je ne suis même pas totalement sûr de poster au bon endroit, veuillez m'excuser si ce n'est pas le cas.

j'ai une page html (qui sert à visualiser plusieurs caméra réseaux), presque vide, et javascript.html qui contient le script.

Tout fonctionne comme il faut sous IE, mais une page vierge est affichée avec Google Chrome.

Il contient notemment la fonction document.write qui apparemment n'est pas supporté par chrome, et qui présente par ailleurs un certain nombre de soucis.

Voici le code de ma page html :

Code :

<frameset rows=0,110,* border=0><frame name=JavaScriptFrame src=JavaScript.html><frame name=TopFrame><frame name=BottomFrame></frameset>

et voici le code javascript.html qui contient le script :

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
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
<script>
 
CamsIPs = new Array();
CamsNames = new Array();
 
var NumberOfCams = 4;
 
var IndividualScanTimeInterval = 1000; //In milliseconds
var GroupsScanTimeInterval = 1000; //In milliseconds
 
//Camera IP + port# in video server
CamsIPs[1]="192.168.0.99";
CamsIPs[2]="";
CamsIPs[3]="";
CamsIPs[4]="";
 
// Camera Name
CamsNames[1]="1; 1";
CamsNames[2]="1; 2";
CamsNames[3]="1; 3";
CamsNames[4]="1; 4";
 
var URLend = '/axis-cgi/mjpg/video.cgi?resolution=352x240&color=1&compression=0&fps=3';
var URLend1 = '/axis-cgi/mjpg/video.cgi?resolution=704x240&color=1&compression=0&fps=3';
 
var NumberOfGroupsOfCams = 1;//5;
 
var GroupOfCamsNumbers1 = new Array(1, 2, 3, 4);
//var GroupOfCamsNumbers2 = new Array(11, 12, 13, 14, 15, 16, 17, 18, 19, 20);
//var GroupOfCamsNumbers3 = new Array(21, 22, 23, 24, 25, 26, 27, 28, 29, 30);
//var GroupOfCamsNumbers4 = new Array(31, 32, 33, 34, 35, 36, 37, 38, 39, 40);
//var GroupOfCamsNumbers5 = new Array(41, 42, 43, 44, 45, 46, 47, 48, 49, 50);
//var GroupOfCamsNumbers6 = new Array(51, 52, 53, 54, 55, 56, 57, 58, 59, 60);
//var GroupOfCamsNumbers7 = new Array(61, 62, 63, 64, 65, 66, 67, 68, 69, 70);
//var GroupOfCamsNumbers8 = new Array(71, 72, 73, 74, 75, 76, 77, 78, 79, 80);
//var GroupOfCamsNumbers9 = new Array(81, 82, 83, 84, 85);
//var GroupOfCamsNumbers10 = new Array(86, 87, 88, 89, 90);
 
//var GroupOfCamsNumbers11 = new Array(1, 11, 21, 31, 41, 51, 61, 71, 81, 86, 2, 12, 22, 32, 42, 52, 62, 72, 82, 87);
//var GroupOfCamsNumbers12 = new Array(3, 13, 23, 33, 43, 53, 63, 73, 83, 88, 4, 14, 24, 34, 44, 54, 64, 74, 84, 89);
//var GroupOfCamsNumbers13 = new Array(5, 15, 25, 35, 45, 55, 65, 75, 85, 90, 6, 16, 26, 36, 46, 56, 66, 76, 0, 0, 7, 17, 27, 37, 47, 57, 67, 77, 0, 0);
//var GroupOfCamsNumbers14 = new Array(8, 18, 28, 38, 48, 58, 68, 78, 0, 0, 9, 19, 29, 39, 49, 59, 69, 79, 0, 0, 10, 20, 30, 40, 50, 60, 70, 80, 0, 0);
 
//var GroupOfCamsNumbers15 = new Array(91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104);
 
var GroupsOfCamsNumbers = new Array(
GroupOfCamsNumbers1);//, 
//GroupOfCamsNumbers2, 
//GroupOfCamsNumbers3, 
//GroupOfCamsNumbers4, 
//GroupOfCamsNumbers5, 
//GroupOfCamsNumbers6, 
//GroupOfCamsNumbers7, 
//GroupOfCamsNumbers8, 
//GroupOfCamsNumbers9, 
//GroupOfCamsNumbers10, 
//GroupOfCamsNumbers11, 
//GroupOfCamsNumbers12, 
//GroupOfCamsNumbers13,
//GroupOfCamsNumbers14,
//GroupOfCamsNumbers15);
 
var NbRows = 3;
var NbCols = 4;
var CamNumber = 1;
var GroupOfCamNumber = 1;
var Timeout = 0;
var AutoScan = 0;
 
function WriteMenuInTopFrame(SelectedView)
{
	top.TopFrame.document.write('<style>a:visited{color:orange}body{margin:3}</style><body bgcolor=0><center><font face=Arial color=white size=4><img src="Logo.png" align=absmiddle> &nbsp <b>');
 
	if (SelectedView != -3) 
		top.TopFrame.document.write('<a href="JavaScript:top.JavaScriptFrame.WriteMenuInTopFrame(-3)">');
	top.TopFrame.document.write('Ciclico individual<a> | ');
 
	if (SelectedView != -2) 
		top.TopFrame.document.write('<a href="JavaScript:top.JavaScriptFrame.WriteMenuInTopFrame(-2)">');
	top.TopFrame.document.write('Ciclico por lineas<br>');
 
 
	for (GroupOfCam=1; GroupOfCam<=NumberOfGroupsOfCams; GroupOfCam++) {
		top.TopFrame.document.write('<a>  ');
		if (GroupOfCam != SelectedView) top.TopFrame.document.write('<a href="JavaScript:top.JavaScriptFrame.WriteMenuInTopFrame(' + GroupOfCam + ')">');
		if (GroupOfCam < 11) top.TopFrame.document.write('Linea ' + GroupOfCam);
		if (GroupOfCam == 15) top.TopFrame.document.write('Celdas Columnares');
		}
 
	top.TopFrame.location.reload();
 
	clearTimeout(Timeout);
 
	// Ciclico Individual
	if (SelectedView == -3) {AutoScan = 1; NbCols=4; NbRows=2; WriteBottomFrameForOneCam(0)}
	// Ciclico por linea
	if (SelectedView == -2) {AutoScan = 1; NbCols=4; NbRows=3; WriteBottomFrameForOneGroupOfCams(GroupsOfCamsNumbers[0], NbCols, NbRows)}
 
	// Lineas
	if (SelectedView == 1) {AutoScan = 0; NbCols=4; NbRows=3; WriteBottomFrameForOneGroupOfCams(GroupsOfCamsNumbers[SelectedView-1], NbCols, NbRows)}
	if (SelectedView == 2) {AutoScan = 0; NbCols=4; NbRows=3; WriteBottomFrameForOneGroupOfCams(GroupsOfCamsNumbers[SelectedView-1], NbCols, NbRows)}
	if (SelectedView == 3) {AutoScan = 0; NbCols=4; NbRows=3; WriteBottomFrameForOneGroupOfCams(GroupsOfCamsNumbers[SelectedView-1], NbCols, NbRows)}
	if (SelectedView == 4) {AutoScan = 0; NbCols=4; NbRows=3; WriteBottomFrameForOneGroupOfCams(GroupsOfCamsNumbers[SelectedView-1], NbCols, NbRows)}
	if (SelectedView == 5) {AutoScan = 0; NbCols=4; NbRows=3; WriteBottomFrameForOneGroupOfCams(GroupsOfCamsNumbers[SelectedView-1], NbCols, NbRows)}
	if (SelectedView == 6) {AutoScan = 0; NbCols=4; NbRows=3; WriteBottomFrameForOneGroupOfCams(GroupsOfCamsNumbers[SelectedView-1], NbCols, NbRows)}
	if (SelectedView == 7) {AutoScan = 0; NbCols=4; NbRows=3; WriteBottomFrameForOneGroupOfCams(GroupsOfCamsNumbers[SelectedView-1], NbCols, NbRows)}
	if (SelectedView == 8) {AutoScan = 0; NbCols=4; NbRows=3; WriteBottomFrameForOneGroupOfCams(GroupsOfCamsNumbers[SelectedView-1], NbCols, NbRows)}
	if (SelectedView == 9) {AutoScan = 0; NbCols=4; NbRows=2; WriteBottomFrameForOneGroupOfCams(GroupsOfCamsNumbers[SelectedView-1], NbCols, NbRows)}
	if (SelectedView == 10) {AutoScan = 0; NbCols=4; NbRows=2; WriteBottomFrameForOneGroupOfCams(GroupsOfCamsNumbers[SelectedView-1], NbCols, NbRows)}
 
	// Celdas individuales
	//if (SelectedView == 11) {AutoScan = 0; NbCols=10}
	//if (SelectedView == 12) {AutoScan = 0; NbCols=10}
	//if (SelectedView == 13) {AutoScan = 0; NbCols=10}
	//if (SelectedView == 14) {AutoScan = 0; NbCols=10}
 
	//Columnas
	if (SelectedView == 15) {AutoScan = 0; NbCols=4; NbRows=4; WriteBottomFrameForOneGroupOfCams(GroupsOfCamsNumbers[SelectedView-1], NbCols, NbRows)}
}
 
function WriteBottomFrameForOneGroupOfCams(CamsNumbers, NbCols, NbRows)
{
	var HTMLoutput = '<style>a:link{color:orange}a:visited{color:orange}body{margin:0}td{text-align:center}</style><body bgcolor=0><font face=Arial color=white><table border=0 bordercolor=gray cellspacing=0 cellpadding=4 width=100%>';
 
	for(Row=0; Row<NbRows; Row++) 
		{
		   HTMLoutput += '<tr>';
 
		   for (Col=1; Col<=NbCols; Col++) 
			{
			 if (CamsNumbers[NbCols*Row+Col-1] > 0) 
				{
 
					if (CamsNumbers[NbCols*Row+Col-1] < 91)
					{
				 // If Internet Explorer under Windows then use ActiveX 
				 HTMLoutput += '<td><object id=Player width=';
				 HTMLoutput += ((top.document.body.offsetWidth-5)/NbCols - 20);
				 //         HTMLoutput += ((top.document.body.offsetWidth-5)/NbCols - 10);   Original width
				 HTMLoutput += ' height=';
				 HTMLoutput += ((top.document.body.offsetWidth-5)/NbCols - 20)*3/4;
				 //         HTMLoutput += ((top.document.body.offsetHeight-120)/NbRows - 38);   Original height
				 HTMLoutput += ' CLASSID="CLSID:745395C8-D0E1-4227-8586-624CA9A10A8D" ';
				 HTMLoutput += 'CODEBASE=http://';
				 HTMLoutput += CamsIPs[CamsNumbers[NbCols*Row+Col-1]];
				 HTMLoutput += '/activex/AMC.cab#version=4,1,4,0>';
				 HTMLoutput += '<param name=MediaURL value=http://';
				 HTMLoutput += CamsIPs[CamsNumbers[NbCols*Row+Col-1]];
				 HTMLoutput += URLend + '>';
				 HTMLoutput += '<param name=MediaType value=mjpeg-unicast>';
				 HTMLoutput += '<param name=AutoStart value=1>';
				 HTMLoutput += '<param name=StretchToFit value=1>';
				 HTMLoutput += '</object>'	
					}
 
					if (CamsNumbers[NbCols*Row+Col-1] > 90)
					{
				 // If Internet Explorer under Windows then use ActiveX 
				 HTMLoutput += '<td><object id=Player width=';
				 HTMLoutput += ((top.document.body.offsetWidth-5)/NbCols - 20);
				 //         HTMLoutput += ((top.document.body.offsetWidth-5)/NbCols - 15);   Original width
				 HTMLoutput += ' height=';
				 HTMLoutput += ((top.document.body.offsetWidth-5)/NbCols - 20)*1/2;
				 //         HTMLoutput += ((top.document.body.offsetHeight-120)/NbRows - 20);   Original height
				 HTMLoutput += ' CLASSID="CLSID:745395C8-D0E1-4227-8586-624CA9A10A8D" ';
				 HTMLoutput += 'CODEBASE=http://';
				 HTMLoutput += CamsIPs[CamsNumbers[NbCols*Row+Col-1]];
				 HTMLoutput += '/activex/AMC.cab#version=4,1,4,0>';
				 HTMLoutput += '<param name=MediaURL value=http://';
				 HTMLoutput += CamsIPs[CamsNumbers[NbCols*Row+Col-1]];
				 HTMLoutput += URLend + '>';
				 HTMLoutput += '<param name=MediaType value=mjpeg-unicast>';
				 HTMLoutput += '<param name=AutoStart value=1>';
				 HTMLoutput += '<param name=StretchToFit value=1>';
				 HTMLoutput += '</object>'	
					}
 
				}
			 else 
				HTMLoutput += '<td>&nbsp'
			} // End of first loop on cols (cams videos)
			HTMLoutput += '<tr>';
 
			for (Col=1; Col<=NbCols; Col++) 
			{
			if (CamsNumbers[NbCols*Row+Col-1] > 0) 
				{
				HTMLoutput += '<td><a href="JavaScript:top.JavaScriptFrame.WriteBottomFrameForOneCam(' + CamsNumbers[NbCols*Row+Col-1] + ')"><b>' + CamsNames[CamsNumbers[NbCols*Row+Col-1]]
				}
			else 
				HTMLoutput += '<td>&nbsp'
			} // End of second loop on cols (cams names)
		} // End of loop on rows
	HTMLoutput += '</table>';
 
	top.BottomFrame.document.write(HTMLoutput);
	top.BottomFrame.location.reload();
 
	if (GroupOfCamNumber==10) {GroupOfCamNumber=0;}
 
	GroupOfCamNumber++;
 
	if (GroupOfCamNumber>NumberOfGroupsOfCams) 
		GroupOfCamNumber=9;
 
	if (AutoScan == 1) 
		Timeout = setTimeout("WriteBottomFrameForOneGroupOfCams(GroupsOfCamsNumbers[GroupOfCamNumber-1], NbCols, NbRows)",GroupsScanTimeInterval);
 
	if (AutoScan == 2)
		Timeout = setTimeout("WriteBottomFrameForOneGroupOfCams(GroupOfCamsNumbers13, 4, 4)", IndividualScanTimeInterval);
}
 
function StopAutoScan()
{
	clearTimeout(Timeout);
	AutoScan = 0;
	WriteMenuInTopFrame(0)
}
 
function WriteBottomFrameForOneCam(NewCamNumber)
{
	if (NewCamNumber > 0) 
	{
		CamNumber=NewCamNumber;
		StopAutoScan()
	}
 
	top.BottomFrame.document.write(
	'<style>a:link{color:orange}a:visited{color:orange}body{margin:0}</style><body bgcolor=0><center><object id=Player width='
	+ (top.document.body.offsetHeight-150)*4/3 
	+ ' height=' + (top.document.body.offsetHeight-150) 
	+ ' CLASSID="CLSID:745395C8-D0E1-4227-8586-624CA9A10A8D" CODEBASE=http://' 
	+ CamsIPs[CamNumber] 
	+ '/activex/AMC.cab#version=4,1,4,0><param name=MediaURL value=http://' 
	+ CamsIPs[CamNumber] 
	+ URLend1 
	+ '><param name=MediaType value=mjpeg-unicast><param name=AutoStart value=1><param name=StretchToFit value=1></object><font size=1><br><font face=Arial size=5 color=orange><b><a href=JavaScript:top.JavaScriptFrame.StopAutoScan()>' 
	+ CamsNames[CamNumber]);
 
	top.BottomFrame.location.reload();
 
	CamNumber++;
 
	if (CamNumber>NumberOfCams) 
	{
		CamNumber=1;
	}
 
	if (AutoScan == 1) 
		Timeout = setTimeout("WriteBottomFrameForOneCam(0)",IndividualScanTimeInterval)
}
 
WriteMenuInTopFrame(-3)
</script>

Voici ce que me donne la console de dev de Chrome :

Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file:///C:/Users/ ..... /Page%20HTML/JavaScript.html. Domains, protocols and ports must match.
JavaScript.html:290Uncaught TypeError: Cannot call method 'write' of undefined ( ligne 70)


Je viens par ailleurs de trouver ceci :

5. La déclaration du codage à l'aide de JavaScript (document.write) ne fonctionne pas
Google Chrome ne lit pas les informations de codage déclarées avec document.write(). Par exemple, si vous utilisez cette méthode pour déclarer le codage des cadres iFrames, des caractères incorrects peuvent apparaître lors de l'affichage d'un tel cadre. Plutôt que :

frame1.js

Code :

Code :

1
2
document.write("<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">" );
    ... autre code JavaScript ...

... nous vous recommandons le codage suivant :

frame1.html


Code :

Code :

1
2
3
4
5
6
7
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <script type="text/javascript">
    ... votre code JavaScript ...
    </script>
    ...

Je ne comprends pas bien comment adapter ceci à mon cas, je dois sortir de mon script avant d'appeler document.write, faire l'équivalent en html, et remettre une balise script après ?

Merci d'avance pour votre aide...

[SpaceFrog]

Fais une recherche avec document.write sur ce forum, tu en comprendras les limites...

Ensuite pour certains navigateurs tenter de modifier une page about:blank est considéré comme une faille de sécurité, une sorte de tentative crossdomain.

Enfin il serait préférable de créer tes éléments au moyen du DOM

[sekaijin]

Ne jamais utiliser document.write

on se sent bien plus léger après