[AJAX] Executer Javascript chargé par Ajax

**Sylvain71** · 02/10/2006, 15h16

Bonjour,

J'utilise sur un projet des div sous forme de "panel flottants". Le contenu de ceux ci est chargé "bourrinement" par ajax. C'est à dire en gros :
maDiv.innerHTML = chaineRecupParAjax ;

Evidemment pas de probleme pour l'html, par contre, le javascript chargé n'est pas executé.

Par exemple :

Code :

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

1
2
3
4
5
 
Blablabla html tralalala
<script type="text/javascript">
	alert('Je suis executé !') ;
</script>

Normal me direz vous, mais une solution me donnerez vous ?

**FremyCompany** · 02/10/2006, 15h27

http://www.developpez.net/forums/sho...?t=6259&page=2

**Sylvain71** · 02/10/2006, 17h29

Merci pour cette solution, elle fonctionne à merveille ... sous FF

Sous ie, cette ligne :

Code :

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

var AllScripts=div.getElementsByTagName("script");

ne retourne aucun élément.

**FremyCompany** · 02/10/2006, 17h42

Ca m'étonne franchement !
Il me semble l'avoir developpé pour IE pourtant (mais bon, ptêtre que j'ai testé FF)
Deplus, j'ai déjà conseillé le script a de nombreuses personnes qui ne m'ont jamais rien dit de tel...
Ta page est-elle en ligne ?

EDIT :
As tu fais des tests simples (ex : setInnerHTML(document.getElementById("divContent"), "<script>alert('')</script>"))

**Sylvain71** · 02/10/2006, 17h45

Non ce n'est pas en ligne et je ne peux pas vraiment le mettre ...

Je vais continuer à chercher parce que je ne comprend pas non plus pourquoi ça ne fonctionne pas.

Pour m'aider dans mes tests peux tu me dire comment récuperer le nom des tags dans les boucles de ce style :

Code :

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

1
2
3
4
5
 
var All=div.getElementsByTagName("*");
 
	for (var i=0; i<All.length; i++) 
	{

**FremyCompany** · 02/10/2006, 17h46

1) voir mon Edit
2) Oui : item.tagName.toLowerCase()=="script"

**Sylvain71** · 03/10/2006, 09h05

Bon voila, retour au boulot, retour des problèmes aussi

J'ai donc fait des tests pour voir ce qui n'allait pas sous IE.

Code :

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

1
2
3
4
5
var div = document.createElement('div') ;
div.innerHTML = contenu ;
 
alert(contenu) ;
alert(div.innerHTML) ;

Le premier alert m'afficher bien les balises <script>, mais celles ci disparaissent dans le 2ème

**NikoGJ** · 03/10/2006, 12h21

A mon avis, c'est peut etre parce que le code est inséré après le chargement de la page, et vu que le javascript s'exécute quand on charge une page....il n'y a aucun effet. Par contre je vois pas pourquoi il ne s'affiche pas dans ton 2eme alert...

A la rigueur, tu peux essayer d'évaluer ton code JS avec eval()...

ALkyD · 26/02/2007, 00h51

Envoyé par FremyCompany

http://www.developpez.net/forums/sho...?t=6259&page=2

Ca ne marche pas quand il y a des document.write() à l'intérieur du script... Ni sous FF ni ailleurs. Au lieu d'écrire le texte là où il y a le document.write, ça l'écrit sous une page blanche (comme en temps normal lorsque la page est déjà chargée et qu'on utilise document.write après).

**FremyCompany** · 26/02/2007, 19h02

document.write = mal

**Peerofloo** · 08/04/2007, 16h11

Envoyé par Sylvain71

Merci pour cette solution, elle fonctionne à merveille ... sous FF

Sous ie, cette ligne :

Code :

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

var AllScripts=div.getElementsByTagName("script");

ne retourne aucun élément.

Je confirme, ca fonctionne pas du tout sous IE7. Bizzare...

**FremyCompany** · 08/04/2007, 17h04

En effet, il y a des problèmes sous IE 7...
Code corrigé :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// setInnerHTML Sécurisé
function setInnerHTML(divContent, HTML) {
    divContent.innerHTML=HTML; 
    try {
      var All=divContent.getElementsByTagName("*");
      for (var i=0; i<All.length; i++) {
        All[i].id=All[i].getAttribute("id")
        All[i].name=All[i].getAttribute("name")
        All[i].className=All[i].getAttribute("class")
      }
    } catch (ex) {}
    try {
      var AllScripts=HTML.extractTags("script");
      AllScripts.forEach(function (v) {
        eval(v);
      })
    } catch (ex) {}
    try {
      var AllStyles=HTML.extractTags("style");
      AllStyles.forEach(function (v) {
        var s=document.createStyleSheet()
        s.cssText=v;
        s.enabled=true;
      }, true)
    } catch (ex) {}
}
 
String.prototype.extractTags=function(tag) {
    var matchAll = new RegExp('(?:<'+tag+'.*?>)((\n|\r|.)*?)(?:<\/'+tag+'>)', 'img');
    var matchOne = new RegExp('(?:<'+tag+'.*?>)((\n|\r|.)*?)(?:<\/'+tag+'>)', 'im');
    return (this.match(matchAll) || []).map(function(scriptTag) {
      return (scriptTag.match(matchOne) || ['', ''])[1];
    });
  }
 
Object.prototype.forEach=function(delegate, ownpropertiesonly) {
        if (typeof(delegate)=="function") {
            if (this instanceof Array && typeof(ownpropertiesonly)=="undefined") {
                ownpropertiesonly=true;
            }
            for (key in this) {
                var ok = (!ownpropertiesonly);
                if (!ok) {
                    try {
                        ok=this.hasOwnProperty(key)
                    } catch (ex) {}
                }
                if (ok) {
                    try { delegate(this[key], key, this) } catch(e) {
                        // ...
                    }
                }
            }
        }
        return false;
    }
 
Object.prototype.map=function(iterator) {
    var results = [];
    this.forEach(function(value, index) {
      results.push(iterator(value, index));
    });
    return results;
  }

Testez voire si ca marche (comme c'est extrait d'un code bcp plus long, il se peut que des méthodes manquent dans l'extrait)

**Peerofloo** · 08/04/2007, 19h01

Nikel ca marche, merci.

Edit: Par contre j'ai un autre soucis (Tjr sous IE7). Les styles CSS de ma feuille de style ne sont pas appliqué sur le code HTML ajouté via le "innerHTML".

**FremyCompany** · 08/04/2007, 20h58

Sur ?

Pourtant j'ai mis un truc pour faire ca... Je regarderais ca demain, peut-être ai-je fait une faute dans mon script

**Peerofloo** · 12/04/2007, 11h39

Ouai je confirme, les classes et id ont une valeur null sous IE7. du coup aucun style CSS applicable. :/

**A&Nexus** · 23/10/2007, 23h22

Bonjour,

Est ce que depuis vous auriez réussi à corriger ce bug de style ?

Ou peut etre trouver une autre technique qui permet de corriger ce probleme de script qui ne se recharge pas quand on fait un innerHTML.

Merci à vous pour vos réponses,

**lvr** · 13/12/2007, 23h14

Problème de ce code, c'est qu'il ne fonctionne pas
- avec prototype.js, car les méthodes map existent déjà
- il ne charge pas les scripts incorporés via <script src=...></script>

Par contre avec la 1ère version, ça fonctionne très bien.

[AJAX] Executer Javascript chargé par Ajax

JavaScript

Discussions similaires

Partager

Partager