[HTML] Insertion d'une page dans une autre : pb avec IE7

Version imprimable

26/09/2007, 00h46
Neit_Sabes

[HTML] Insertion d'une page dans une autre : pb avec IE7

Bonjour,

j'ai besoin d'insérer dans ma page une page provenant d'un tiers. Codant en xhtml strict (je suis un prosélythe intégriste de la normalisation :mouarf: ) je ne peux utiliser de frames (en plus c'est pas beau :( ). Je me suis donc servi du code conseilé dans la FAQ :

Code:

<object id="contenuImporte" type="text/html" data="lien" >

Tout fonctionne bien avec netscape mozilla et mozilla FF mais avec IE le bloc est completement vide. Pourquoi donc ?

question subsidiaire: comment adapté automatiquement la hauteur du bloc object à la hauteur de son contenu ?

[edit] lorsque j'affiche le code source de la page insérée avec IE, j'ai un joli <p> </p> :cry: .
26/09/2007, 12h32
onirisme
A priori, pour ie, il faut définir explicitement les dimensions.
Code:

1 2 <object type="text/html" data="TonFichier" width="160px" height="600px">
26/09/2007, 12h38
Bisûnûrs
Citation:
Envoyé par onirisme

A priori, pour ie, il faut définir explicitement les dimensions.

Code:

1 2 <object type="text/html" data="TonFichier" width="160px" height="600px">
Sans les unités si elles sont renseignées par l'attribut HTML.
26/09/2007, 13h00
onirisme

Oui pardon pour les unités...:oops:
26/09/2007, 13h49
Neit_Sabes

Les dimensions sont definies dans la feuille de style. Le problème ne vient pas des dimensions :(

Peut etre une piste : Sous IE le pied de page n'apparait plus. En fait tout element venant apres la balise object n'apparait plus.

Une image du résultat serait peut-etre plus parlante :

Affichage avec FF

Affichage avec IE7
27/09/2007, 06h22
onirisme

Tu peux faire voir ton code complet?

Bien sûr :

La page :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Office de tourisme de Mirebeau-sur-B&egrave;ze</title>
	<link rel="stylesheet" type="text/css" href="../OT2/css/stylesheet.css" media="screen" /> 
	<script type="text/javascript">
                <!--
                window.onload=montre;
                function montre(id) {
                var d = document.getElementById(id);
                        for (var i = 1; i<=10; i++) {
                                if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
                        }
                if (d) {d.style.display='block';}
                }
                //-->
        </script>
</head>
 
<body>
 
	<div id="conteneur">
 
	<!-- MENU debut -->
 
		<div id="menu">
 
			<!-- ACTUALITES -->
      <dl>
 
				<dt onmouseover="javascript:montre('smenu0');"><a href="index?rub=0&amp;lg=fr">ACTUALITES</a></dt>
        </dl>
                 <!-- HEBERGEMENT RESTAURANT -->
 
      <dl>
 
				<dt onmouseover="javascript:montre('smenu1');"><a href="index?rub=1&amp;lg=fr">HEBERGEMENT RESTAURANT</a></dt>
        <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
                <ul>
 
                     <li><a href="index?lg=fr&amp;rub=1&amp;srub=1">Les h&ocirc;tels</a></li>
             <li><a href="index?lg=fr&amp;rub=1&amp;srub=2">Les chambres d'h&ocirc;te</a></li>
 
             <li><a href="index?lg=fr&amp;rub=1&amp;srub=3">Les locations de vacance</a></li>
             <li><a href="index?lg=fr&amp;rub=1&amp;srub=4">Les campings</a></li>
             <li><a href="index?lg=fr&amp;rub=1&amp;srub=5">Les restaurants</a></li>
        </ul>
				</dd>
        </dl>
                 <!-- ACTIVITES MANIFESTATIONS -->
 
      <dl>
 
				<dt onmouseover="javascript:montre('smenu2');"><a href="index?rub=2&amp;lg=fr">ACTIVITES MANIFESTATIONS</a></dt>
        <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
                <ul>
 
                     <li><a href="index?lg=fr&amp;rub=2&amp;srub=1">Des id&eacute;es de sortie</a></li>
             <li><a href="index?lg=fr&amp;rub=2&amp;srub=2">Les f&ecirc;tes et manifestations</a></li>
 
             <li><a href="index?lg=fr&amp;rub=2&amp;srub=3">Les activit&eacute;s de loisir</a></li>
             <li><a href="index?lg=fr&amp;rub=2&amp;srub=4">Les randonn&eacute;es p&eacute;destres</a></li>
        </ul>
				</dd>
        </dl>
                 <!-- VISITES <br/> PATRIMOINE -->
 
      <dl>
 
				<dt onmouseover="javascript:montre('smenu3');"><a href="index?rub=3&amp;lg=fr">VISITES <br/> PATRIMOINE</a></dt>
        <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
                <ul>
 
                     <li><a href="index?lg=fr&amp;rub=3&amp;srub=1">Les sites et monuments historiques</a></li>
             <li><a href="index?lg=fr&amp;rub=3&amp;srub=2">Les mus&eacute;es</a></li>
 
             <li><a href="index?lg=fr&amp;rub=3&amp;srub=3">Les parcs et jardins</a></li>
             <li><a href="index?lg=fr&amp;rub=3&amp;srub=4">Les artisans</a></li>
             <li><a href="index?lg=fr&amp;rub=3&amp;srub=5">Les visites pour jeunes et scolaires</a></li>
        </ul>
				</dd>
        </dl>
                 <!-- DECOUVRIR LE CANTON -->
 
      <dl>
 
				<dt onmouseover="javascript:montre('smenu4');"><a href="index?rub=4&amp;lg=fr">DECOUVRIR LE CANTON</a></dt>
        <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
                <ul>
 
                     <li><a href="index?lg=fr&amp;rub=4&amp;srub=1">G&eacute;ographie</a></li>
             <li><a href="index?lg=fr&amp;rub=4&amp;srub=2">Histoire</a></li>
             <li><a href="index?lg=fr&amp;rub=4&amp;srub=3">Chiffres cl&eacute;s</a></li>
 
        </ul>
				</dd>
        </dl>
                 <!-- QUI <br/>SOMMES NOUS ? -->
      <dl>
 
				<dt onmouseover="javascript:montre('smenu5');"><a href="index?rub=5&amp;lg=fr">QUI <br/>SOMMES NOUS ?</a></dt>
        </dl>
                 <!-- LIENS <br />PARTENAIRES -->
 
      <dl>
 
				<dt onmouseover="javascript:montre('smenu6');"><a href="index?rub=6&amp;lg=fr">LIENS <br />PARTENAIRES</a></dt>
        </dl>
                 <!-- MENU fin -->
                </div>
 
		<!-- BANNIERE -->
		<h1 id="header"><span>Canton de Mirebeau sur B&egrave;ze</span></h1>
 
		<!-- OPTIONS debut-->
		<div id="option">
			<a href="#"><img src="../OT2/image/commun/acces-admin.gif" alt="acces pro" /></a>
      <a href="index?rub=1&amp;srub=1&amp;lg=en"><img src="../OT2/image/commun/en.gif" alt="anglais"/></a>
      <a href="index?rub=1&amp;srub=1&amp;lg=de"><img src="../OT2/image/commun/de.gif" alt="allemand"/></a>
      </div>
    <!-- CONTENU debut -->
          <div id="contenu">   <h2>H&Eacute;bergement-Restaurants</h2>
 
          <object id="contenuImporte" type="text/html" data="http://www.cotedor-tourisme.com/resultat.php?typ=heb&amp;sstyp=hot&amp;can=20&amp;lg=fr"> </object>
            </div><!-- PIED DE PAGE debut -->
		<div id="footer">
			<a href="#" title="Infos légales">Infos L&eacute;gales</a> | <a href="#" title="Plan">Plan du site</a> | <a href="mailto:seb.petit21@free.fr" title="Contact">Contact</a>
 
		</div>
	<!-- PIED DE PAGE fin -->
 
 
	</div>	
</body>
</html>

La feuille de style :

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
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
 
/* style par défaut */
body
{
	margin: 1px 0 ;
	padding: 0 ;
	text-align: center ;
	font-family:/*Arial,*/ Helvetica, sans-serif;
	font-size:small;
	color:#808080;
	background-color:#FFF;
}
 
a:link
{
	color:#688CC2;
	text-decoration:none;
	font-weight:bold;
}
 
a:visited
{
	color:#688CC2;
	text-decoration:none;
	font-weight:bold;
}
 
a:hover
{
	color:#688CC2;
	text-decoration:underline;
	font-weight:bold;
}
 
a:active
{
color:#688CC2;
text-decoration:underline;
font-weight:bold;
}
 
dl, dt, dd, ul, li 
{
margin: 0;
padding: 0;
list-style-type: none;
}
 
/* barre de menu */
 
div#menu 
{
	width:875px;
	position:absolute;
	margin: 0 auto;
}
 
#menu dl 
{
	float: left;
	width: 125px;
	margin: 0;
	z-index: 100;
}
 
#menu dt 
{
 
	cursor: pointer;
	text-align: center;
	line-height:0.75em;
	font-weight: bold;
	letter-spacing: -0.6px;
	background: #ccc;
	border-right: 1px dotted #FFF;
	height: 30px;
	z-index: 100;
}
#menu dd 
{
	width :200px;
	z-index:150;
}
 
#menu ul 
{
	border-top:1px solid #FFF;
	/*z-index:150:*/
}
 
#menu li 
{
	text-align: left;
	padding:0;
	margin:0;
	background: #fff;
	border-top:none;
	border:1px solid #FFF;
	border-top:0;
	z-index:150;
}
#menu li a, #menu dt a 
{
	color: #FFF;
	font-size:0.8em;
	font-weight:bold;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	z-index:100;
}
 
#menu li a
{
	background: #8DA113;
	padding: 0 0 0 5px;
}
 
#menu dt a
{
	background: #8DA113 url(../image/commun/fondMenu.gif) repeat-x;
}
 
#menu li a:hover, #menu dt a:hover 
{
	background: #FFF;
	color:#8DA113;
	z-index:100;
}
 
 
 
div#conteneur
{
	width: 875px ;
	margin: 0 auto ;
	text-align: left ;
	border:solid;
	border-width:1px;
	border-color:#E5E5E5;
}
 
/*titres*/
 
	/*entete*/
h1#header
{
	margin:0;
	padding:0;
	height: 120px ;
	color: #FFF;
	background: #8DA113 /*url(../image/commun/apple.jpg)*/;
	line-height:120px;
	text-align:center;
	border-top: #FFF solid 31px;
	z-index:0;
}
 
 
h1#header a
{
	font-weight:lighter;
	color: #FFF;
	text-decoration:none;
}
 
h2
{
	font-weight:lighter;
	font-size:1.5em;
	color:#F2A22A;
	text-transform:uppercase;
	margin:0;
	padding: 5px;
}
 
h3
{
	margin:0;
	color:#F2A22A;
	font-size:1em;
	padding-top:0px;
}
 
/* barre langue acces pro */
 
div#option
{
	margin:0;
	padding:10px 5px 0 0;
	border-top: #E5E5E5 solid 1px;
	text-align:right;
}
 
div#option img
{
	border: 0 none;
}
 
/* contenu */
 
div#contenu
{
	padding: 10px;
	clear:both;
 
}
 
 
 
div#contenu p 
{
	margin-top:10px;
	padding: 5px 0 10px 0;
	text-align:justify;
	border-bottom: 1px dotted #808080;
 
}
 
 
div#contenu img/*.illustration*/
{
 
 
	margin:0;
	padding:5px 5px 0 0;
 
 
}
 
div#contenu img.illustration
{
 
	float:left;
 
 
 
}
 
div#contenu p.listing
{
	margin-top:0px;
}
 
 
div#contenu p br.finParagraphe
{
	clear:both;
	/*line-height:0;*/
}
 
div#contenu p a.liste
{
	color:#6F8F0A;
}
 
div#contenu p a/*.liste*/ img
{
	border: 0 none;
	padding-left:5px;
}
 
div#contenu p em
{
	font-style:normal;
	font-weight:bold;
}
 
#contenuImporte
{
	width:860px;
	height:500px;
	border: 0 none;
}
 
/*détail d'un element recherche*/
 
div#detailListe
{
	padding-left:5px;
	float:left;
	width:57%;
}
 
div#tarif
{
	float:right;
	width:40%;
	padding:0 5px 0 10px;
	/*border-bottom: #E5E5E5 solid 1px;*/
	border-left: #E5E5E5 solid 1px;
}
 
div#tarif span.libelletarif
{
	font-weight:bold;
	float:left;
}
 
 
div#tarif span.tarif
{
 
	float:right;
}
 
 
/* pied de page*/
 
div#footer
{
	padding: 0 5px;
	height:24px;
	background: #8DA113 url(../image/commun/fondPied2.gif) repeat-x;
	border-top: 1px solid #E5E5E5;
	color:#FFF;
	font-size:0.8em;
	text-align:right;
	line-height:24px;
	clear:both;
}
 
div#footer a
{
	color:#FFF;
	font-weight:normal;
	text-decoration:underline;
}

27/09/2007, 14h30
onirisme

As tu déjà réussi à réaliser ce type d'import sur un fichier php?

Le problème vient du type mime qui n'est pas interprété correctement par ie

J'ai testé sur un fichier html et cela fonctionne bien.

Je ne sais pas si ie peut interpréter des requêtes, je ne sais pas si ie peut importer un document php

J'ai essayé avec type="application/x-httpd-php" sans succes

Je sais pas quoi te dire mais regarde du côté de application/x-httpd-php

[EDIT] Pourquoi tu passes pas par un include?
27/09/2007, 14h43
Neit_Sabes

Je ne peux pas utiliser d'include pour cet element. Les donnees contenues dans la page à inserer sont stockées chez un tiers et ils sont pas chaud pour me filer un accès direct à leur base de donnéées. De plus ils me fournissent la page avec la mise en forme que je desire, les donnees sont selectionnées pour moi, bref ca m'economise un temps de developpement non négligeable.

Sinon je vois pas pourquoi tu vas chercher du cote de php : php est interprété par le serveur, il construit le code html qu'il envoie au client. Ici c'est le client qui interprete mal la balise object, aucun rapport avec php je crois.

Citation:

J'ai testé sur un fichier html et cela fonctionne bien.

Qu'as tu testé je comprends pas bien.

P.S. : merci de te pencher sur mon problème ;)
27/09/2007, 14h51
Bisûnûrs

Lors de la mise à jour de la FAQ, n'ayant pas IE7 je n'ai pas pu tester si ce code fonctionnait, alors qu'il est bien fonctionnel sur IE6.

Il faudrait que je trouve d'autres avis sur ce problème d'inclusion à l'aide de la balise object avec IE7 et modifier la FAQ en conséquence ..
27/09/2007, 15h06
onirisme

Citation:

Envoyé par Neit_Sabes

Sinon je vois pas pourquoi tu vas chercher du cote de php : php est interprété par le serveur, il construit le code html qu'il envoie au client. Ici c'est le client qui interprete mal la balise object, aucun rapport avec php je crois.
Qu'as tu testé je comprends pas bien.

P.S. : merci de te pencher sur mon problème ;)

Toujours est t'il que ta page fonction avec un document <object type="text/html"> J'ai testé sur un document html que j'ai réalisé. et également sur un .php

C'est cette partie du code que ie ne parvient pas à lire (partie en rouge)
<object id="contenuImporte" type="text/html" data="http://www.cotedor-tourisme.com/resultat.php?typ=heb&sstyp=hot&can=20&lg=fr"> </object>
27/09/2007, 15h40
Neit_Sabes

ok, je n'avais pas compris. Du coup j'ai testé en remplacant l'adresse par un simple "http://www.google.fr". Ca ne fonctionne pas non plus ... :(

Bon, j'ai rien trouvé de mieux...

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<div id="contenu">   <h2>H&Eacute;bergement-Restaurants</h2>
<!--[if IE]>
<iframe src="http://www.cotedor-tourisme.com/resultat.php?typ=heb&amp;sstyp=hot&amp;can=20&amp;lg=fr"  type="text/html" width="850" height="500">
Votre Navigateur ne supporte pas le iframes.
</iframe>
<![endif]-->
<!--[if !IE]> <!-->
<object  data="http://www.cotedor-tourisme.com/resultat.php?typ=heb&amp;sstyp=hot&amp;can=20&amp;lg=fr"  type="text/html" width="850" height="500">
alt : <a href="data/test.html">test.html</a>
</object>

Et je sais même pas si ça marche sur ie

27/09/2007, 16h25
Neit_Sabes

Après divers tests il apparait que c'est le "http://" qu'il ne supporte pas. Tout document hébergé sur le serveur est correctement affiché quelle que soit l'extension ou son emplacement.

Affiché une erreur sur IE7 c'est pas le pied :D
27/09/2007, 16h27
Bisûnûrs

Ah bah. Encore un truc de sécurité à la noix de Microsoft qui interdit l'import de fichier sur un serveur distant par la balise object. ^^

Avec leur pari d'augmenter la sécurité sur IE7 et Windows Vista, ils ont tout bridé ces couillons (et heureusement qu'ils ne sont pas Japonais).
27/09/2007, 16h30
Neit_Sabes

Une idée pour contourner le problème ?
27/09/2007, 16h34
Bisûnûrs

Ben, l'iframe comme le propose onirisme.
27/09/2007, 16h36
Neit_Sabes

Je serai plus valide xhtml-strict, mon intégrisme va en prendre un coup :( rien d'autre?
27/09/2007, 16h43
Bisûnûrs

Citation:

Envoyé par Neit_Sabes

Je serai plus valide xhtml-strict

Ah ça ... :/

Une dernière solution serait de renommer ta page .html en .shtml (inutile de regarder le rendu en local, ça ne fonctionne pas sauf si tu as un serveur interprétant les Server Side Includes (à priori tous les serveurs Apache l'ont par défaut)) puis d'inclure l'adresse comme ça :

Code:


27/09/2007, 16h47
Neit_Sabes

moi yen a pas comprendre ...
Mes pages sont generees en php je vois pas trop comment en faire du shtml.
Et pour le include je vois pas trop où le placer.
27/09/2007, 17h01
Bisûnûrs

Tu peux alors toujours passer à un DOCTYPE XHTML 1.0 Transitional qui acceptera ton iframe.

Je pense que c'est la seule solution si tu veux garder ta validité.
27/09/2007, 17h09
Neit_Sabes

Je crois que je vais devoir passer par là. Au diable Microsoft et leur non-respect des standards :evilred:
27/09/2007, 17h19
onirisme

J'ai fais un tour sur la base de connaissances de Microsoft et en gros Y a pas de problèmes...

Pareil pour google groups, là y a plein de problèmes mais pas de solutions...
27/09/2007, 17h41
Neit_Sabes

Rien trouvé non plus. Merci pour m'avoir mis sur la piste de l'adresse.