Javascript fonction "include" sans langage serveur

**XsjadO** · 21/07/2014, 14h45

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**SylvainPV** · 21/07/2014, 15h39

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("[data-include]").each(function(){ $(this).load($(this).attr("data-include")); });

**sekaijin** · 21/07/2014, 15h55

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

**XsjadO** · 21/07/2014, 16h17

Bonjour SylvainPV,

J'ai essayé ceci, avec ce que tu m'as donné :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>
<!------------- 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 ------------------->
		<script src="../jquery.js"></script>
		<script src="../mon-script.js"></script>
	</body>
</html>

Avec mon-script.js qui contient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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]

**SylvainPV** · 22/07/2014, 01h18

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.

**sekaijin** · 22/07/2014, 07h01

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

**XsjadO** · 22/07/2014, 10h34

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>
<!-- __________________________ MENU __________________________ -->
	<div data-include="000000menu.html"></div>
<!-- __________________________ FIN MENU __________________________ -->
		<p id="sub_navigation">Accueil</p>
 
<!-- __________________________ Boite Dialogue __________________________ -->
		<div id="section">
				<div class="article">
				</div>
		</div>
<!-- __________________________ FIN Boite Dialogue _____________________________ -->
 
<!-- __________________________ Footer __________________________ -->
			<div data-include="footer.html"></div>
<!-- __________________________ FIN Footer __________________________ -->
	</body>
</html>

Javascript fonction "include" sans langage serveur

JavaScript

Discussions similaires

Partager

Partager