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

Actualité par Raphael (Eleveur de kiwiz, Strasbourg)
Mis à jour le 07 Décembre 2011. 118285 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 2005-02-15 14:05:14

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

YoGi a dit le 2005-02-15 14:13:22

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 2005-02-15 14:32:12

@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 2005-02-15 15:08:45

Pas mal. Merci pour l'info :)

(Merci Xavier!)

Xavier a dit le 2005-02-15 15:54:04

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 2005-02-15 17:40:28

Et sémantiquement parlant, ca dit quoi ?

gizmo a dit le 2005-02-15 18:22:54

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 2005-02-20 13:33:42

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 2005-02-22 19:41:46

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

Paul E a dit le 2005-02-22 23:55:35

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 2005-02-23 12:44:22

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 2005-02-23 13:00:26

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 2005-02-23 14:03:43

Paul, you are an angel !

jb_gfx a dit le 2005-02-24 03:10:14

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 2005-02-25 17:55:15

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 2005-03-03 21:36:16

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 2005-06-16 16:47:05

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