Javascript fonction "include" sans langage serveur

Version imprimable

Bonjour à toutes et à tous !

J'ai fait de mon mieux pour avoir un titre assez clair, je travaille en ce moment sur un site destiné à être utilisé offline par des utilisateurs non-techniciens et qui sera véhiculé sur une clé usb par exemple. (Ce site est un tutoriel).

Je ne peux donc pas me permettre d'employer de langage server-side. J'ai fini par trouver sur la toile un code JavaScript me permettant d'inclure mon menu et mon footer sur toutes mes pages. Cela fonctionne très bien sous firefox, mais certains utilisateurs seront sous IE v8, et là devinez... ça ne marche pas !

J'ai activer les scripts sous IE etc... J'ai pas mal chercher avant de m'en remettre à vous mais là je suis coincé.

Mes compétences en javascript sont plutôt sommaires, mais je me débrouille pas trop mal en html et css... Je n'ai pas de message d'erreur dans la console IE, mais rien de ce qui devrait être inclut ne s'affiche...

Voici le code JS :

Code:

1
2
3
4
5
6
7
8
9
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")); } };

Mes pages HTML sont de la forme :

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
   <html>
    	<head>
    		<link rel="stylesheet" href="../style.css" />
    		<link rel="stylesheet" href="../menu.css" />
    		<script type="text/javascript">
    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")); } };
                </script>
    		<title>TUTO</title>
    	</head>
 
    	<body>
    <!------------------------------------ MENU --------------------------------------->
    	<div data-include="000000menu.html"></div>
    <!-------------------------------- FIN MENU --------------------------------------->
 
 
    <!-------------------------------- Boite Dialogue --------------------------------------->
    		<div id="section">
    				<div class="article">
    				</div>
    		</div>
    <!------------------------------ FIN Boite Dialogue ------------------------------------->
 
 
    <!---------------------------------- Footer ----------------------------------------->
    	<div data-include="footer.html"></div>
    <!-------------------------------- FIN Footer --------------------------------------->
    	</body>
    </html>

J'ai modestement essayer de débugger le code javascript à l'aide de ce site :www.jslint.com -> Mais je dois bien admettre que je suis un peu dépassé... C'est pourquoi je sollicite votre aide !

Bien sûr je reste à votre disposition pour tout complément d'information qui serait nécessaire.
> Par avance, un très grand MERCI !

21/07/2014, 15h39
SylvainPV

En jQuery ça donnerait quelque-chose comme ça :

Code:

$("[data-include]").each(function(){ $(this).load($(this).attr("data-include")); });
21/07/2014, 15h55
sekaijin

avec Ext ça donne requires: ['MaClasse', 'MonAutreClasse'].
A+JYT

Bonjour SylvainPV,

J'ai essayé ceci, avec ce que tu m'as donné :
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 <html> <head> <link rel="stylesheet" href="../style.css" /> <link rel="stylesheet" href="../menu.css" /> <title>TUTO</title> </head> <body>  <div data-include="000000menu.html"></div>   <div id="section"> <div class="article"> </div> </div>   <div data-include="footer.html"></div>  <script src="../jquery.js"></script> <script src="../mon-script.js"></script> </body> </html>
Avec mon-script.js qui contient :
Code:

1 2 3 4 $(function() { // Ici, le DOM est entièrement défini }); $("[data-include]").each(function(){ $(this).load($(this).attr("data-include")); });
Et là ça fonctionne même sous IE !!!

Sinon, le fichier "jquery.js" est un peu lourd, est-il indispensable de l'avoir dans son intégralité ?
Le volume n'est pas ma première contrainte, mais cela reste important tout de même !
>> As-tu des tuyaux pour alléger jquery.js ???

----------------------------------------------------------------------------------------------

Bonjour sekaijin,

Je suis désolé, mais je n'ai rien compris à ce que tu me proposes...

Quoi qu'il en soit, merci à vous deux pour le temps consacré à la rédaction de vos réponses !

Sujet résolu ! :D
[Je cocherais la case "résolu" demain, de peur de fermer le fil de discussion avant les éventuels dernières réponses]

22/07/2014, 01h18
SylvainPV

Pour une utilisation offline ce n'est pas les quelques dizaines de kilooctets de jQuery qui devraient poser problème en principe, mais bon, il y a cette alternative plus légère avec la même syntaxe : http://zeptojs.com/

Sinon, pour que le code s'exécute lorsque le DOM est chargé, il faut le mettre à l'intérieur de la fonction où il y a le commentaire. Mais si tu mets le code JS à la fin du <body> ça revient au même, le DOM est forcément lu avant le script.
22/07/2014, 07h01
sekaijin

il y a aussi
http://requirejs.org/ 15 Ko
A+JYT

En effet, merci Sylvain, j'ai modifié mon-script.js comme ceci :
Code:

1 2 3 4 $(function() { // Ici, le DOM est entièrement défini $("[data-include]").each(function(){ $(this).load($(this).attr("data-include")); }); });
>> Et là ça marche en le laissant dans le head. Cela sera plus pratique pour moi.

Je vais essayer vos liens pour remplacer "jquery.js", je posterais mon résultat après les essais.
> Je n'ai pas réussi à faire fonctionner la méthode avec zepto, en effet :

Citation:

In short, Zepto is expected to work in every modern browser and browser-like environment. Zepto doesn't support old Internet Explorer versions (<10).

> Même si j'ai de toute façon mal dû m'y prendre, car même sous Firefox, ça ne fonctionnait pas...
> Je n'ai pas non plus réussi avec Require.
(Je coche résolu, car ce n'était pas la question initial)

Encore merci à vous deux !
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 <!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>  <div data-include="000000menu.html"></div>  <p id="sub_navigation">Accueil</p>  <div id="section"> <div class="article"> </div> </div>   <div data-include="footer.html"></div>  </body> </html>