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