Inclure un fichier dans une page HTML sans utiliser <iframe>

Actualité par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (176076 lectures)
Tags : iframe, object

Si l'usage des inclusions en langage serveur n'est pas possible et si l'on tient à éviter l'usage contesté de la balise <iframe>, il est théoriquement possible d'utiliser la balise générique <object> pour inclure n'importe quel format de fichier au sein d'un document HTML.

Cependant, bien que cela fonctionne parfaitement sur Firefox, tous mes essais sur Internet Explorer avaient lamentablement échoués jusqu'à ce jour.

En fait, pour utiliser l'élément <object> sous Internet Explorer il faut en définir explicitement les dimensions :

object {
  width:400px;
  height:200px;
}

 

<object data="fichier.html" type="text/html" />

Merci à Xavier pour m'avoir ouvert de nouveaux horizons ;)

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 !


EDIT de derrière les fagots

Merci à Cassy d'avoir exhumé cette astuce et d'y avoir apporté une solution.

Exemple pour 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 il faut appliquer ces styles à la page fille object.php :

html {

	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: hidden;
	border: 0 none;
}

body {
	margin: 0;
	padding: 0;
	border: 0 none;
	overflow-x: hidden;
	overflow-y: hidden;
	width: 160px;
	height: 600px;
}

Commentaires

Damien a dit le

Excellent tout ça, dommage que IE interprète encore ça à sa manière...

YoGi a dit le

Très honnêtement, je ne vois pas trop l'avantage de la balise object par rapport aux iframes. Le rendu coté navigateur graphique est peu ou prou le même (si ce n'est que la balise object semble, à en croire ton billet, moins bien supporté, et que son usage nécessite quelques tweaks), et la page n'est pour autant pas plus accessible..

Mais peut-être suis-je passé à coté de l'aspect intéressant. C'est toutefois bon à savoir, merci!

Raphael a dit le

@YoGi > En fait la raison principale est simple : <iframe> n'est pas accepté en HTML strict et XHTML strict, contrairement à <object> :

"The IFRAME element defines an inline frame for the inclusion of external objects including other HTML documents. IFRAME provides a subset of the functionality of OBJECT; the only advantage to IFRAME is that an inline frame can act as a target for other links. OBJECT is more widely supported than IFRAME, and, unlike IFRAME, OBJECT is included in HTML 4.0 Strict."
-> htmlhelp.com/reference/ht...

solo a dit le

Pas mal. Merci pour l'info :)

(Merci Xavier!)

Xavier a dit le

Je viens de me souvenir d'un autre hic.
IE entretient une notion de "flux" qui lui est propre et partage l'ensemble des éléments html en 2 classes : fenêtrés et non fenêtrés. 2 éléments de classes différentes (l'un fenêtré, l'autre pas) ne peuvent être hiérarchisés à l'aide de la propriété z-index. <object> est fenêtré, alors que les éléments courant (div, p, h1, a...) ne le sont pas. Je vous laisse deviner la suite... et lire (avec modération SVP) éventuellement ceci :
support.microsoft.com/def...

Antoine a dit le

Et sémantiquement parlant, ca dit quoi ?

gizmo a dit le

Sémantiquement parlant, ca ne dit rien du tout, car tu n'as pas de données quand au contenu de la balise object (pas plus pour l'iframe d'ailleur), seulement quant au type de celui-ci.

Thiery a dit le

Merci pour cette astuce.
Super pour virer ces <iframe> que je déteste. Cela fonctionne super avec FireFox (PC et Mac). Par contre IE (6.0 XP SP2), ben pour moi ça ne marche pas. Aucun affichage. Etrange, et j'ai bien suivi l'astuce de définir la hauteur et à la largeur. Pour ma part, ma balise <object> appelle une page générée en php. Est-ce la cause du problème ?
Et pour finir, fonctionne bien avec Safari (1.24), mais arrête le chargement du reste de la page, ou tout au moins tout ce qui suit cette balise ne s'affiche plus. Une idée ?
J'ai un peu cherché sur le net, mais pas trouvé. Quels autres arguments pouvons-nous ajouter en plus de width et height ?

Pascal a dit le

Pour un document en Flash, cela ne fonctionne pas avec width et height...

Paul E a dit le

Salut.
Apparement XP + sp2 empeche l'execution de 'objet' en local. Si tu changes les mesures de securité ça devrait marcher...
Tu peux aussi ajouter la localisation ds la page: left et top.
Par exemple:
object{
position: absolute;
left:138px;
top: 367px;
width: 464px;
height: 505px;
overflow: auto;
}

Amicalement,
Paul

Pascal a dit le

Paul,
Je ne saurais comment te remercier... Je cherche l'info depuis trois jours !

NB : si tu savais comment régler les mesures de sécurité sur XP + SP2, alors là...

Déjà MERCI !

Pascal

Paul E a dit le

Salut Pascal.

En fait ce sont les mesures de securité d'ie...
Ds mon cas, ie m'a donné un message de securité genre 'ie a deshabilite l'execution des contenus actifs du document...'. Il y avait l'option 'pour permettre l'execution des contenus, faire clic ici...'.
Sinon, ds ie/ outil d'internet/options avancées/ tu peux cocher l'option 'permettre l'execution de contenu actif sur mon pc'.
je pense q c'est ce que tu cherches...

Amicalement,
Paul

Pascal a dit le

Paul, you are an angel !

jb_gfx a dit le

Pour votre soucis avec IE6 XPSP2, afin de désactiver le blocage des scripts/objets en local il faut éditer la base de registre. Trouver dans la branche suivante :

HKEY_LOCAL_MACHINE > SOFTWARE > Microsoft > Internet > Explorer > Main > FeatureControl > FEATURE_LOCALMACHINE_LOCKDOWN

Les clés :

"iexplore.exe"
"explorer.exe"

Mettre les deux à 0 (elles ont une valeur de 1 par défaut).

Il n'est pas poosible de désactiver ce comportement pour un profil (utilisateur), seulement pour tous à la fois.

stef a dit le

Il y a une autre solution qui peut être envisagée: les templates...
www.phpcodeur.net/article...
ou
modelixe.phpedit.com/
en plus, ça formalise encore plus la structure des sites. Par contre, c'est pas gratuit en resources, et il faut s'y mettre... J'espère que j'ai pas dit une boulette.

emmanuel a dit le

Pour les très énervantes barres de scroll de IE, essayez ça:

HTML {overflow-x:hidden;}

ça marche avec la iFrame, ça devrait marcher avec le tag Object.

Vinns a dit le

Bin depuis le temps que je me demandais comment inclure une page html ds une autre sans utiliser des include php, des frames, des iframes, ou tout ces genres d'horreurs (jparel pas du include), je crois avoir trouver mon bonheur là ^^

merci bien pour cette astuce !

Vinns