5569 sujets

Sémantique web et HTML

[Astuce] Inclure une page via object tag compatible IE(sans scrollbar)

Bonjour,
En fait je voulais rajouter un commentaire sur cette page Inclure un fichier dans une page HTML sans utiliser <iframe> mais les commentaires sont fermés. Smiley decu

'Raphael GOETTER' a écrit :
Il reste un seul hic : pas moyen de supprimer ou cacher les vilaines barres de scroll autour de l'objet. Les "overflow: hidden" ne fonctionnent pas sous IE et Opera (mais s'appliquent bien sur Firefox). Si quelqu'un a une idée pas trop biscornue, elle est la bienvenue !


Voici donc la solution:

page.html : c'est la page principale qui appelle l'objet

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>Test objet</title>
 </head>
 <body>
<OBJECT type="text/html" data="object.php" width="160px" height="600px">
</OBJECT>
 </body>
</html>


puis faut mettre ce css dans la page fille object.php
HTML {
	margin: 0;
	overflow:auto;
	border: none;
}

body {
	margin: 0;
}


Voilà fini la scrollbar grisé d'IE.

Edit: j'ai viré le superflu dans le css
Edit2: correction hidden -> auto
Modifié par cassy (18 Oct 2006 - 09:50)
Administrateur
Hello,

Merci pour cette solution.
Ce qui me chagrine c'est que certaines propriétés ne sont pas standards, elles sont donc invalides (scrollbar-3dlight-color, etc).
Or tout le but de l'astuce est justement de trouver une alternative aux <iframe> qui soit valide.
Ce serait dommage que la solution ne soit pas standard Smiley decu

Je n'ai pas le temps de procéder à des tests, mais est-ce que ces propriétés sont indispensables ?
Modifié par Raphael (17 Oct 2006 - 13:13)
This Page Is Valid XHTML 1.0 Transitional!
la page object.php avec ces propriétés passait quand même au validateur.
Ces propriétés peuvaient s'enlever (ce que j'ai fait au 1er post).
Modifié par cassy (17 Oct 2006 - 16:03)
Salut,

tiens il me semblait avoir donné cette technique il y a déjà quelques temps Smiley cligne

http://forum.alsacreations.com/topic.php?fid=2&tid=1889&s=object#p29451

Attention, il ne faut pas utiliser overflow:hidden; pour le body de la page insérée via object mais overflow:auto;

Sinon il faut bien avoir conscience qu'utiliser object de cette manière revient purement et simplement à faire un iframe : test avec firefox, survol de la zone concernée avec la souris... click droit =
a écrit :

Ce cadre > Afficher ce cadre seulement


à utiliser avec modération et précaution donc, la page mise en cadre pouvant être atteinte directement. Via un moteur de recherche par exemple, comme ici :
recherche google (voir le deuxième lien)

Sinon on peut noter que les deux points de css :

html {
border:0;
}
body {
overflow:auto;
}


Permettent d'obtenir pour IE, un aspect (concernant la bordure de la page web) et un comportement (concernant la barre de défilement) identiques à ceux de Firefox et Opera.

Le souci concernant l'implémentation d'object par IE vient donc des valeurs css par défaut propres à ce navigateur pour les deux éléments ci dessus.
Modifié par clb56 (18 Oct 2006 - 09:29)
A propos de ce tuto, je voudrais savoir si un truc est possible.
Que ce soit avec des iframes ou avec la balise object, est-il possible d'avoir un effet sur le css de la page appelée ? Du genre faire varier la balise h1.

#Main h1 {
  font-size: 0em;
  margin-top: 0;
  padding-top: 0;
}
Effet : cacher le h1 !

Le #Main ne se trouvant que dans la page appelée. Et non je ne peux pas changer le css directement sur la page appelée.
Merci d'avance !
Modifié par marschupp (26 Oct 2006 - 21:19)
Salut

Oui c'est possible en php;

Partant de la balise object, il suffit d'avoir

data="page.php?choix=page_inside"


et dans page.php

<?php
if (isset($_GET['choix'])) $choix=$_GET['choix'];
if (!$choix=='page_inside') { 
?>
<h1>Titre h1 de la page insérée</h1>
<?php
}
?>


Résultat si la page est dans la frame le <h1> est absent et si elle est toute seule il est présent.

Note : on peut évidemment faire la même chose pour un lien retour site si la page insérée est ouverte seule, via un moteur de recherche par exemple.

Comme pour cette page :
http://clb56.freezee.org/prettysnco/videos/

dans ce cas le <h1> est bien présent dans le cas de la page hors frame et absent sinon, et de même pour le lien ré-insérant la page dans le site (celui qui se trouve en fin de document).
Modifié par clb56 (27 Oct 2006 - 00:04)
2 choses.

D'abord, je n'utilise pas de php, seulement du css, du html et du javascript (oui, blogspot c'est bien, mais c'est contrainniant).
Ensuite, la page que j'appele à déjà ses propres styles, que j'aimerais écrasés (flickr c'est bien, mais c'est pas joli comme présentation).
Mon but, vous ne l'aurez pas deviné, est d'afficher dans blogspot une page flickr que je met en forme à mon goût.

Ensuite, j'ai pas très bien compris où on influait sur la mise en forme, j'ai juste remarqué que dans l'exemple, ca marche. Smiley confus

EDIT, 30s plus tard : si j'ai compris pourquoi le h1 s'affichait dans un cas et pas dans l'autre. Mais je ne peux rien faire sur la page appelé, je voulais donc savoir s'il était possible d'écraser le css de la page appelé. Smiley confused

EDIT, bien plus tard : en gros, ce qui m'interrèserait serait de savoir si l'on peut écraser, dans le contexte, un css. Dire au navigateur "Bonjour, si tu appele ce css, alors tu le remplace par celui-là". Smiley rolleyes
Modifié par marschupp (27 Oct 2006 - 17:30)
a écrit :
Ah bon ? lol
Ben, c'est à dire que ca permet de gèrer un peu la collection de photos quoi. Et ca fait des jolis diaporama (ou en tant cas, j'aime les diaporamas).
Mais hors de ca, c'est pas la super classe. Donc j'aimerais amélioré un peu.

EDIT:
J'ai résolu mon problême. Voir ici.
Modifié par marschupp (31 Oct 2006 - 15:18)
Bonjour.

Je me demandais s'il était possible d'utiliser cette fonction <object> après avoir appuyé sur un lien ou si cela était réservé aux iframes (target)?

En fait, ce que je veux faire, est d'aller à un frame inline nomme "object" après avoir cliqué sur l'élément d'un menu fait par une animation Flash contenue dans la page mère.

J'espère que c'est assez clair.

Merci de votre réponse.
Bonjour,

ce message pour ceux qui tomberaient sur ce topic depuis google comme ce fut mon cas

Je suis tombé depuis Google sur cet article :
http://forum.alsacreations.com/faq/faq-38-Comment-inclure-un-fichier-dans-une-page-HTML-sans-utiliser-ltiframegt-.html
qui n'a pas réglé entièrement mon problème

Depuis l'article je suis venu sur cette page :
http://blog.alsacreations.com/2005/02/15/119-inclure-un-fichier-dans-une-page-html-sans-utiliser-iframe

Et depuis cette page sur ce topic du forum, qui n'a pas répondu à 100% à ma problématique

Mon problème c'est un bug de IE6, le contenu de mon Iframe qui est dans une case de tableau, disparait partiellement si on resize la fenetre du navigateur IE6 (XP SP2) quand on est pas en plein écran (et dire que ca marche sous FF2 pour une fois)

J'ai donc voulu remplacer mon Iframe par un object

La méthode pour remplacer Iframe par un Object fonctionne MAIS il est bien précisé dans les articles traitant de ce sujet qu'il faut spécifier la taille sous IE en pixels pour que ca marche.
Exact, si on ne mentionne pas la height sous IE, il n'affiche rien (un trou)
Si on la spécifie en %tage, ca n'affiche rien non plus Smiley bawling (a noter qu'en %tage ca marche sous FF2)

La solution que j'ai trouvé consiste :
spécifier la height="100%" sur la case qui contient l'object !
+
spécifier la height="100%" sur l'object lui même
la fausse iframe en object se comporte exactement comme une vraie iframe ! Smiley ravi

Intéret ? : si vous avez ce genre de bug de disparition du contenu d'une iframe sous ie6, vous pouvez la remplacer par un object dans une case en dimensions relatives % et non pas seulement en pixels px !
(ça fonctionne sous IE6 et Firefox2 sur PC, je n'ai pas testé ailleurs)
Je n'arrive pas à remplacer les tables par des div (ca ne fait jamais ce que je veux au pixel près), mon exemple est donc à base de table

extraits de code :

page principale, appel du menu façon iframe :

....<table border="0" cellpadding="0" cellspacing="0" width="919">
<td width="168" height="100%" valign="top">
<object type="text/html" data="menu.htm" width="168px" height="100%">
</object>
</td><td width="751">contenu</td></tr>....


page du menu apellé par le object, ce css est appliqué au body : (ascenseur vertical automatique, haut avec fond graphique unique, bas en couleur unie)
.bodymenu
{
background-image:url(fondmenu.gif);
background-repeat:no-repeat;
background-attachment:fixed;
color:#EA0000;
padding: 0;
margin: 0;
border: 0 none;
overflow-x: hidden;
overflow-y: auto;
}


voila, en espérant avoir au moins aidé quelqu'un qui aura lu ce que j'ai écris Smiley cligne
Bonjour,
Vette solution fonctionne très bien si l'on est sur le même FAI mais comment passer le résultat du PHP d'un FAI vers un autre.
En fait j'ai un mysql sur Free et des pages sur lycos, waika ... et je veux gérer mes vistes de pages sur un seul SGBD. Les appels à php fonctionnent très bien seul les résultats ne reviennent pas (j'utilse ECHO)
Cordialement


cassy a écrit :
Bonjour,
En fait je voulais rajouter un commentaire sur cette page Inclure un fichier dans une page HTML sans utiliser <iframe> mais les commentaires sont fermés. Smiley decu



Voici donc la solution:

page.html : c'est la page principale qui appelle l'objet

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>Test objet</title>
 </head>
 <body>
<OBJECT type="text/html" data="object.php" width="160px" height="600px">
</OBJECT>
 </body>
</html>


puis faut mettre ce css dans la page fille object.php
HTML {
	margin: 0;
	overflow:auto;
	border: none;
}

body {
	margin: 0;
}


Voilà fini la scrollbar grisé d'IE.

Edit: j'ai viré le superflu dans le css
Edit2: correction hidden -> auto
Sujet clos
Aller à