Fichier externe HTML en Javascript ?

**FRANCKYIV** · 03/08/2011, 16h04

Bonjour les gens

Alors voilà j'explique mon problème.

Je suis l'un des webmasters de ce site : www.toutes-les-solutions.fr

C'est un forum que nous avons tellement modulé qu'il ressemble en partie à un site web aussi.

Adresse Web :
http://www.toutes-les-solutions.fr/phpbb/hacks_list.php

(plus de 150 modifications)

Bref ... le forum comporte des rubriques comme par exemple les fiches de téléchargement.

Nous avons rajouté un module qui permet d'insérer du code HTML dans les messages.
Ce qui veut donc dire que je peux mettre du HTML, CSS ou encore Javascript dans les messages.

Maintenant voici mon problème.

Prenons cet exemple de fiche :

Adresse Web :
http://www.toutes-les-solutions.fr/phpbb/topic361.html

Elle commence par une barre de partage vers les réseaux sociaux (facebook, twitter, etc).

Voici le code mis dans la page :

Code :

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
<table class="partage">
<tr>
<td>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" align="center">
<a class="addthis_button_favorites" title="Créer un Marque page"></a>
<a class="addthis_button_facebook" title="Partager sur Facebook"></a>
<a class="addthis_button_twitter" title="Partager sur Twitter"></a>
<a class="addthis_button_myspace" title="Partager sur Myspace"></a>
<a class="addthis_button_wordpress" title="Partager sur Wordpress"></a>
<a class="addthis_button_blogger" title="Partager sur Blogger"></a>
<a class="addthis_button_netvibes" title="Partager sur Netvibes"></a>
<a class="addthis_button_email" title="Partager par Email"></a>
<a class="addthis_button_compact" title="Partager sur d'autres choses"></a>
<a class="addthis_counter addthis_bubble_style"></a>
<a class="addthis_button_google_plusone" title="Partager sur Google Plus One"></a>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d6e18ae4d9e688b"></script>
<!-- AddThis Button END -->
</td>
</tr>
</table>

Le problème, c'est qu'il m'arrive de modifier ce code pour réarranger les icônes (rajouter google plus one par exemple).

Je me demandais s'il n'était pas possible de mettre ce code dans un fichier externe, et ainsi n'avoir à modifier qu'un seul fichier au lieu de la centaine de fiches de téléchargements.

Je me pose la question en Javascript, puisque c'est le seul langage que je peux utiliser dans les messages.

Voilà ... si quelqu'un peut me trouver une piste ;-)

**FRANCKYIV** · 03/08/2011, 16h47

Plus je regarde, et plus je me dis que c'est mal barré ... :-P

Je vais voir s'il n'est pas possible de créer un bbcode pour php afin de pouvoir executer du php.

Ca serait bien plus simple d'utiliser le php je pense.

**Bovino** · 03/08/2011, 16h51

Tu me fais peur là...

Tu veux dire que dans les messages, il est déjà possible de mettre du JavaScript qui sera interprété et que tu comptes en plus ajouter du PHP qui sera exécuté sur le serveur ???

**Sharcoux** · 03/08/2011, 17h44

Il faut mettre ton html dans un fichier xml puis faire une requête ajax avec dataType = "html".
Ensuite, évidemment, tu récupère la partie du xml qui t'intéresse (càd le html), et tu l'insère où tu veux dans ta page avec innerHTML ou $.html()

testé et approuvé

**FRANCKYIV** · 03/08/2011, 17h45

Envoyé par Bovino

Tu me fais peur là...

Tu veux dire que dans les messages, il est déjà possible de mettre du JavaScript qui sera interprété et que tu comptes en plus ajouter du PHP qui sera exécuté sur le serveur ???

Oui tout à fait :-)

Pour l’interprétation du HTML qui se fait via un bbcode [html] [/html] cela ne fonctionne que pour les administrateurs du forum (on est deux) ... + un groupe d'utilisateur que je peux définir.

Maintenant, je vais voir pour faire la même chose avec PHP

**FRANCKYIV** · 03/08/2011, 17h45

Envoyé par Sharcoux

Il faut mettre ton html dans un fichier xml puis faire une requête ajax avec dataType = "html".

testé et approuvé

Ah je ne connaissais pas cette piste, je vais tester

**FRANCKYIV** · 03/08/2011, 18h09

Envoyé par Sharcoux

Il faut mettre ton html dans un fichier xml puis faire une requête ajax avec dataType = "html".
Ensuite, évidemment, tu récupère la partie du xml qui t'intéresse (càd le html), et tu l'insère où tu veux dans ta page avec innerHTML ou $.html()

testé et approuvé

Bon ben c'est pas évident :-P

Tu n'aurais pas un exemple à me montrer ?

**Sharcoux** · 03/08/2011, 18h15

lol

ok. Déjà, est-xe que tu utilises jQuery? (ca m'arrangerait pour les exemples..

)

**FRANCKYIV** · 03/08/2011, 18h25

Envoyé par Sharcoux

lol

ok. Déjà, est-xe que tu utilises jQuery? (ca m'arrangerait pour les exemples..

)

Heu à priori nan :-D

**FRANCKYIV** · 03/08/2011, 18h27

Adresse Web :
http://blog.jquery.com/2011/06/30/jquery-162-released/

Je télécharge lequel ?

- minified
- regular

**SpaceFrog** · 03/08/2011, 18h36

le minified

les deux fonctionnent, l'une est lisible, l'autre compressée

**FRANCKYIV** · 03/08/2011, 18h42

Envoyé par SpaceFrog

le minified

les deux fonctionnent, l'une est lisible, l'autre compressée

ok marchi

**Sharcoux** · 04/08/2011, 09h59

ok, alors ensuite, tu peux faire comme ça pour charger ton fichier en jQuery :

Code :

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

1
2
3
4
5
6
7
8
    $.ajax({
        url: "monFichier.xml",
        type: "GET",
        dataType: "html",
	success: function(data) {$("div.addthis_toolbox").html($(data).find("div.addthis_toolbox"));
        error: function(type) {alert("Error "+type.status+" : fail while trying to load "+address);}
 
    });

demande si tu veux des explications ou si tu as toujours du mal à l'implémenter

**FRANCKYIV** · 04/08/2011, 10h53

Bon ben j'dois être une buze car ça marche toujours pas

Code :

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
<?xml version="1.0"?>
<page>
<![CDATA[
<table class="partage">
<tr>
<td>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" align="center">
<a class="addthis_button_favorites" title="Créer un Marque page"></a>
<a class="addthis_button_facebook" title="Partager sur Facebook"></a>
<a class="addthis_button_twitter" title="Partager sur Twitter"></a>
<a class="addthis_button_myspace" title="Partager sur Myspace"></a>
<a class="addthis_button_wordpress" title="Partager sur Wordpress"></a>
<a class="addthis_button_blogger" title="Partager sur Blogger"></a>
<a class="addthis_button_netvibes" title="Partager sur Netvibes"></a>
<a class="addthis_button_email" title="Partager par Email"></a>
<a class="addthis_button_compact" title="Partager sur d'autres choses"></a>
<a class="addthis_counter addthis_bubble_style"></a>
<a class="addthis_button_google_plusone" title="Partager sur Google Plus One"></a>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d6e18ae4d9e688b"></script>
<!-- AddThis Button END -->
</td>
</tr>
</table>
]]>
</page>

Peut-être à cause de mon XML qui ne serait pas bon ?
Il faut dire qu'il y a du javascript dans mon xml, peut-être pour ça ?
D'un autre côté, je peux laisser ça dans les fiches.
C'est pas ça qui est génant, mais plutôt la liste que j'aimerai modifier.

**Sharcoux** · 04/08/2011, 15h14

ta balise est pas fermée :

Code :

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

<div class="addthis_toolbox addthis_default_style addthis_32x32_style" align="center">

ensuite, à mon avis, vire le CDATA qui risque de poser un problème.
Après, il faut adapter mon code, par exemple

Code :

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

1
2
3
4
5
6
7
8
    $.ajax({
        url: "monFichier.xml",
        type: "GET",
        dataType: "html",
	success: function(data) { $("sélecteurCSS de l'élément où insérer le html").html($(data).find("table.partage").html());
        error: function(type) {alert("Error "+type.status+" : fail while trying to load "+address);}
 
    });

Si tu as encore des problèmes, n'hésites pas, mais donne nous un peu plus d'éléments pour t'aider (code de la page, code xml, javascript utilisé, erreur rencontrée, ou ce que tu veux obtenir au final par exemple)

edit: OUPS, j'avais oublié un .html() dans le code

**FRANCKYIV** · 04/08/2011, 21h31

Oh ben oui merde ma balise n'est même pas fermé :-P

Bon ça fonctionne toujours pas.

Je me suis dis, c'est peut-être à cause du système du forum.

J'ai donc testé en HTML pure.
Et ça ne marche toujours pas.

Voilà exactement ce que j'ai mis :

Pour le fichier XML :

Code :

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
<?xml version="1.0"?>
<page>
<![CDATA[
<table class="partage">
<tr>
<td>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" align="center">
<a class="addthis_button_favorites" title="Créer un Marque page"></a>
<a class="addthis_button_facebook" title="Partager sur Facebook"></a>
<a class="addthis_button_twitter" title="Partager sur Twitter"></a>
<a class="addthis_button_myspace" title="Partager sur Myspace"></a>
<a class="addthis_button_wordpress" title="Partager sur Wordpress"></a>
<a class="addthis_button_blogger" title="Partager sur Blogger"></a>
<a class="addthis_button_netvibes" title="Partager sur Netvibes"></a>
<a class="addthis_button_email" title="Partager par Email"></a>
<a class="addthis_button_compact" title="Partager sur d'autres choses"></a>
<a class="addthis_counter addthis_bubble_style"></a>
<a class="addthis_button_google_plusone" title="Partager sur Google Plus One"></a>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d6e18ae4d9e688b"></script>
<!-- AddThis Button END -->
</div>
</td>
</tr>
</table>
]]>
</page>

Et pour le fichier HTM :

Code :

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
<html>
 
<head>
<script src="http://www.toutes-les-solutions.fr/phpbb/js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" title="defaut" href="http://www.toutes-les-solutions.fr/phpbb/css/tutos.css" type="text/css"></link>
</head>
 
<body>
 
<script language="Javascript"> 
$.ajax({
        url: "http://www.toutes-les-solutions.fr/phpbb/xml/partage.xml",
        type: "GET",
        dataType: "html",
	success: function(data) { $("sélecteurCSS de l'élément où insérer le html").html($(data).find("table.partage").html());
        error: function(type) {alert("Error "+type.status+" : fail while trying to load "+address);}
 
    });
</script>
 
</body>
 
</html>

Je teste ceci à cette adresse :

Adresse Web :
http://www.toutes-les-solutions.fr/test

Désolé d'être aussi noob ... et merci de ta patience

**Sharcoux** · 05/08/2011, 09h56

"All text in an XML document will be parsed by the parser. But text inside a CDATA section will be ignored by the parser."

Si j'étais toi, j'enlèverais la balise CDATA avant de mettre le contenu dans le fichier xml...

ah, et ça : $("sélecteurCSS de l'élément où insérer le html") c'était à remplacer par ça, par exemple : $("body")

**FRANCKYIV** · 05/08/2011, 12h31

Fichier XML :

Code :

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
<?xml version="1.0"?>
<page>
<table class="partage">
<tr>
<td>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" align="center">
<a class="addthis_button_favorites" title="Créer un Marque page"></a>
<a class="addthis_button_facebook" title="Partager sur Facebook"></a>
<a class="addthis_button_twitter" title="Partager sur Twitter"></a>
<a class="addthis_button_myspace" title="Partager sur Myspace"></a>
<a class="addthis_button_wordpress" title="Partager sur Wordpress"></a>
<a class="addthis_button_blogger" title="Partager sur Blogger"></a>
<a class="addthis_button_netvibes" title="Partager sur Netvibes"></a>
<a class="addthis_button_email" title="Partager par Email"></a>
<a class="addthis_button_compact" title="Partager sur d'autres choses"></a>
<a class="addthis_counter addthis_bubble_style"></a>
<a class="addthis_button_google_plusone" title="Partager sur Google Plus One"></a>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d6e18ae4d9e688b"></script>
<!-- AddThis Button END -->
</div>
</td>
</tr>
</table>
</page>

Fichier HTML :

Code :

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
<html>
 
<head>
<script src="http://www.toutes-les-solutions.fr/phpbb/js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" title="defaut" href="http://www.toutes-les-solutions.fr/phpbb/css/tutos.css" type="text/css"></link>
</head>
 
<body>
 
<script language="Javascript"> 
$.ajax({
        url: "http://www.toutes-les-solutions.fr/phpbb/xml/partage.xml",
        type: "GET",
        dataType: "html",
	success: function(data) { $$("body").html($(data).find("table.partage").html());
        error: function(type) {alert("Error "+type.status+" : fail while trying to load "+address);}
 
    });
</script>
 
</body>
 
</html>

Toujours pas ...

**Sharcoux** · 05/08/2011, 13h22

courage, t'y es presque. Il faut mettre le script dans le head et utiliser document.onload ou son équivalent $.ready :

Code :

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
<html>
 
<head>
<script src="http://www.toutes-les-solutions.fr/phpbb/js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" title="defaut" href="http://www.toutes-les-solutions.fr/phpbb/css/tutos.css" type="text/css"></link>
 
<script language="Javascript"> 
init = function() {
    $.ajax({
        url: "http://www.toutes-les-solutions.fr/phpbb/xml/partage.xml",
        type: "GET",
        dataType: "html",
	success: function(data) { $("body").html($(data).find("page").html());
        error: function(type) {alert("Error "+type.status+" : fail while trying to load "+address);}
 
    });
}
$(document).ready(init);
</script>
 
 
</head>
 
<body>
 
</body>
 
</html>

edit : attention, petite correction dans le selecteur

**FRANCKYIV** · 07/08/2011, 20h50

OK marchi

Je teste ça demain (lundi).

La c'est le week-end, et je travaille avec mon collègue justement sur le dit forum (optimisation du forum, du serveur, etc).

J'te dis quoi demain

Fichier externe HTML en Javascript ?

JavaScript

Discussions similaires

Partager

Partager