"include" sans langage serveur

Question

sL4sh

23 Jul 2014 à 12:11

Bonjour à tous,

Mon besoin : inclure mon menu et mon footer dans toutes mes pages.
Contraintes : Aucun langage serveur (utilisation en local mais sur de nombreux postes), compatibilité Firefox et IE8, minimum de poids (diffusion par clé usb ou en pièce jointe par mail).

J'ai déjà ceci qui fonctionne avec Firefox mais pas IE :

window.onload = function () {function a(a, b) {var c = /^(?:file):/, d = new XMLHttpRequest(), e = 0;
     d.onreadystatechange = function () {4 === d.readyState && (e = d.status);
         c.test(location.href) && d.responseText && (e = 200);
         4 === d.readyState && 200 === e && (a.outerHTML = d.responseText);
        };
     try {d.open("GET", b, !0);
          d.send();
        } catch (ignore) {} } var b, c = document.getElementsByTagName("*");
    for (b in c) {c[b].hasAttribute && c[b].hasAttribute("data-include") && a(c[b], c[b].getAttribute("data-include")); } };

Amis modérateurs ou admins, le bbcode forum modifie le script que j'ai partagé ci-dessus, je n'ai pas trouvé moyen de le désactiver...

J'ai pu me dépatouiller avec ceci en jQuery :

$(function() {
  // Ici, le DOM est entièrement défini
  $("[data-include]").each(function(){ $(this).load($(this).attr("data-include")); });
});

Mais inclure la bibliothèque jQuery alors que je n'ai aucun autre besoin de script, c'est un peu radical, et pas vraiment léger...

Mes compétences en JS sont très minces, pour ne pas dire inexistantes Smiley ohwell

Aucun des deux bouts de code n'est le fruit de mon travail... Promis j'essayerais de m'y mettre, mais je suis un peu pris par le temps...

Du coup, si l'un d'entre vous a une idée de ce qui coince dans le premier script pour IE8, ça serait l'idéal...

Par avance, MERCI !
Bien sur, je me tiens à votre disposition pour tout complément d'information que vous jugerez nécessaire ![/b][/b][/b][/b]
Modifié par sL4sh (23 Jul 2014 - 12:20)

QuentinC

23 Jul 2014 à 12:53

Tu as déjà essayé avec la balise <object> ?

Une de ses utilisations possibles est d'incorporer un fichier HTML dans un autre.
JE te laisse te documenter sur le sujet.

sL4sh

23 Jul 2014 à 13:42

Oui j'ai essayé avec <object> et <iframe> aussi, mais le problème c'est que les liens ouverts par le menu s'ouvraient alors à l'intérieur de la balise, et ça à chaque fois... Je me retrouvais avec une imbrication multiple...
Bref, cela n'a pas été concluant...

niuxe

Modérateur

24 Jul 2014 à 01:21

Salut,

La solution est un JS obstructif et intrusif. Sans cette techno, ça ne fonctionnera pas. Donc technique dégueu... Ceci dit regarde cette solution :

page mère (index.html) :


<!doctype html>
<!--[if lte IE 7]> <html class="no-js ie67 ie678" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 ie678" lang="fr"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="fr"> <![endif]-->
<!--[if gt IE 9]> <!--><html class="no-js" lang="fr"> <!--<![endif]-->
<head>
		<meta charset="UTF-8">
		<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
		<title>J'aime Schnaps.it</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" href="css/knacss.css" media="all">
		<link rel="stylesheet" href="css/styles.css" media="all">
</head>
<body>
	<header>
	</header>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>
	$(function(){
		$('header').load('header.html #header');
	})
	</script>
</body>
</html>

page include (header.html) :


<!doctype html>
<!--[if lte IE 7]> <html class="no-js ie67 ie678" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 ie678" lang="fr"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="fr"> <![endif]-->
<!--[if gt IE 9]> <!--><html class="no-js" lang="fr"> <!--<![endif]-->
<head>
		<meta charset="UTF-8">
		<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
		<title>J'aime Schnaps.it</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" href="css/knacss.css" media="all">
		<link rel="stylesheet" href="css/styles.css" media="all">
</head>
<body>
	<div id="header">
		<nav><ul><li><a href="#">menu</a></li></ul></nav>
	</div>
</body>
</html>

edit : jquery = 100 ko environs. C'est une goutte d'eau et tu pourras ajouter des effets sympas Smiley cligne

Modifié par niuxe (24 Jul 2014 - 01:44)

QuentinC

24 Jul 2014 à 07:35

a écrit :
Oui j'ai essayé avec <object> et <iframe> aussi, mais le problème c'est que les liens ouverts par le menu s'ouvraient alors à l'intérieur de la balise, et ça à chaque fois... Je me retrouvais avec une imbrication multiple...
Bref, cela n'a pas été concluant...

Essaie avec target="_top" sur tous tes liens. C'est pas très beau et pas valide W3C, mais c'est pas trop grave. C'est toujours mieux que de sortir une usine à gaz js pour pas grand chose à mon avis.

De toute façon, de l'AJAX en contexte local, je ne suis pas sûr que ça puisse fonctionner sur IE sans modifier les paramètres de sécurité. IL me semblais, notamment pour les pages sur CD et les pages en file://, qu'AJAX ne fonctionnait pas par défaut (cette constatation date de IE6 mais je ne pense pas que ça ait beaucoup changé)

sL4sh

24 Jul 2014 à 14:01

Bonjour niuxe,

Je suis navré, mais je ne comprends pas trop l'intérêt de ta méthode, j'ai déjà un truc qui fonctionne en utilisant jquery (sous IE8 et sous Firefox) :
Voici mon fichier script.js

$(function() {
  // Ici, le DOM est entièrement défini
  $("[data-include]").each(function(){ $(this).load($(this).attr("data-include")); });
});

Avec un html du style :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
		<link rel="stylesheet" href="../style.css" />
		<link rel="stylesheet" href="../menu.css" />
		<script type="text/javascript" src="../jquery.js"></script>
		<script type="text/javascript" src="../script.js"></script>
		<title>TUTO</title>
	</head>

	<body>
<!-- ___________________________ MENU ____________________________ -->
	<div data-include="000000menu.html"></div>
<!-- ________________________ Contenu page _______________________ -->
		<div id="section">
				<div class="article">
				</div>
		</div>
<!-- _________________________ Footer ____________________________ -->
			<div data-include="footer.html"></div>
	</body>
</html>

Du coup, ta méthode a pour seul avantage d'utiliser une version en ligne de jquery, ce que je pourrais décider d'utiliser aussi... Parce que même les 98Ko de jquery minifié (que j'utilise) sont beaucoup dans mon cas, puisque je cherche à ne pas dépasser le poids d'une pièce jointe pour un mail Smiley smile

J'ai probablement loupé un truc dans ta méthode... Elle me semble plus compliquée et ne me dispense pas d'utiliser jQuery !

Edit : Ah ! En fait toi tu définis manuellement la racine de ton site sur l'index.html, c'est bien ça ?
Perso, j'ai contourné ce problème pour utiliser des liens relatifs dans le menu en mettant tous mes fichiers html dans le même dossier...
C'est certain que si je devais refiler le bébé à un autre programmeur il pourrait me maudir sur plusieurs générations ! lol

-------------------------------------------------------------------------------------------------------------------------
re-Bonjour QuentinC,

Pas mal du tout le coup du target="_top", je ne connaissais pas !
Mais ça m'ennuie de rajouter quelque chose d'invalide W3C vu que le reste de mon code l'est...

Bon là, c'est plus mon côté perfectionniste, vu que de toute façon ce "site" ne sera jamais en ligne... Mais comme je suis loin d'être un expert, je préfère m'habituer aux bonnes pratiques dès le départ !
Modifié par sL4sh (24 Jul 2014 - 14:05)

Oken

24 Jul 2014 à 16:28

Sinon y a <FRAME> super léger, compatible. Smiley lol

sL4sh

25 Jul 2014 à 10:19

Oken a écrit :
Sinon y a <FRAME> super léger, compatible.

J'avais essayé avec iframe, invalide W3C et problème d'imbrication multiple.
Je pense qu'avec target="_top" que m'a donné QuentinC ça aurait pu marché...

Pour <frame>, le problème c'est que ça n'est pas supporté en html 5 :
http://www.w3schools.com/tags/tag_frame.asp
>>

a écrit :
The <frame> tag is not supported in HTML5.

En fait, je cherchais surtout à comprendre ce qui clochait dans ce petit bout de JS, car il fonctionne parfaitment bien sous Firefox, mais sous IE8, il a l'avantage de ne recourir à aucune bibliothèque, donc un poids très contenu :

window.onload = function () {function a(a, b) {var c = /^(?:file):/, d = new XMLHttpRequest(), e = 0;
     d.onreadystatechange = function () {4 === d.readyState && (e = d.status);
         c.test(location.href) && d.responseText && (e = 200);
         4 === d.readyState && 200 === e && (a.outerHTML = d.responseText);
        };
     try {d.open("GET", b, !0);
          d.send();
        } catch (ignore) {} } var b, c = document.getElementsByTagName("*");
    for (b in c) {c[b].hasAttribute && c[b].hasAttribute("data-include") && a(c[b], c[b].getAttribute("data-include")); } };

À partir de là où ça devient en gras (bold), c'est qu'il manque un [.b.] (sans les ".")[/b][/b][/b][/b]
Modifié par sL4sh (25 Jul 2014 - 10:23)

QuentinC

25 Jul 2014 à 13:05

a écrit :
En fait, je cherchais surtout à comprendre ce qui clochait dans ce petit bout de JS, car il fonctionne parfaitment bien sous Firefox, mais sous IE8

La réponse se trouve sûrement dans l'exception catchée que tu ignores complètement. JE pense sans avoir testé que c'est dû à une restriction de sécurité. En tout cas je ne vois pas à priori d'autres problème, l'objet XMLHttpRequest en natif est sauf erreur supporté depuis IE8.

Par contre, ca serait bien de poster ce code en version normale, pas en version
compressée/obfusquée..... ça complique la lecture pour rien

Le !0 à la place de true est juste exceptionnel! à moins de s'appeler Google, Apple, Microsoft ou Amazon, 2 octets, franchements... osef. Faut vraiment avoir un esprit tordu pour avoir une idée pareille.

sL4sh

25 Jul 2014 à 14:53

QuentinC a écrit :
La réponse se trouve sûrement dans l'exception catchée que tu ignores complètement. JE pense sans avoir testé que c'est dû à une restriction de sécurité. En tout cas je ne vois pas à priori d'autres problème, l'objet XMLHttpRequest en natif est sauf erreur supporté depuis IE8.

C'est déjà un début, je te remercie, mais je suis dépassé de toute façon, pour l'instant, le js c'est un peu comme du chinois pour moi...

QuentinC a écrit :
Par contre, ca serait bien de poster ce code en version normale, pas en version
compressée/obfusquée..... ça complique la lecture pour rien

Je l'avais trouvé sur le web :
https://github.com/LexmarkWeb/csi.js
Je crois que c'est cette version là qui correspond à ce que tu me demandes ?
https://github.com/LexmarkWeb/csi.js/blob/d214b3980e049254625740ac0b464a5e9e3e217d/src/csi.js

QuentinC a écrit :
Le !0 à la place de true est juste exceptionnel! à moins de s'appeler Google, Apple, Microsoft ou Amazon, 2 octets, franchements... osef. Faut vraiment avoir un esprit tordu pour avoir une idée pareille.

Ne regarde pas cet article alors Smiley lol

:
http://sylvainpv.developpez.com/tutoriels/javascript/coder-6-caracteres/
Modifié par sL4sh (25 Jul 2014 - 14:55)

Sujet clos

JavaScript, DOM et API Web HTML5

"include" sans langage serveur