L'appel jQuery .load() n'exécute pas le JavaScript dans le fichier HTML chargé

Cela semble être un problème lié uniquement à Safari. J'ai essayé 4 sur Mac et 3 sur Windows et je n'ai toujours pas de chance. J'essaie de charger un fichier HTML externe et d'exécuter le code JavaScript intégré.L'appel jQuery .load() n'exécute pas le JavaScript dans le fichier HTML chargé

Le code que je suis en train d'utiliser est la suivante:

$("#myBtn").click(function() { 
    $("#myDiv").load("trackingCode.html"); 
});

trackingCode.html ressemble à ceci (simples, mais peut se développer une fois/si je reçois ce travail):

<html> 
<head> 
    <title>Tracking HTML File</title> 
    <script language="javascript" type="text/javascript"> 
     alert("outside the jQuery ready"); 
     $(function() { 
      alert("inside the jQuery ready"); 
     }); 
    </script> 
</head> 

<body> 
</body> 
</html>

I Je vois les deux messages d'alerte dans IE (6 & 7) et Firefox (2 & 3). Cependant, je ne suis pas en mesure de voir les messages dans Safari (le dernier navigateur que je dois être concerné - les exigences du projet - s'il vous plaît pas de guerre des flammes).

Vous ne savez pas pourquoi Safari ignore le code JavaScript dans le fichier trackingCode.html? Par la suite je voudrais pouvoir passer des objets JavaScript à ce fichier trackingCode.html à utiliser dans l'appel prêt jQuery, mais je voudrais m'assurer que c'est possible dans tous les navigateurs avant de passer par là.

Source

2009-05-20 Mike

Vous chargez une page HTML entière dans votre div, y compris les balises html, head et body. Que se passe-t-il si vous faites le chargement et que vous avez simplement le script d'ouverture, le script de fermeture et le code JavaScript dans le code HTML que vous chargez?

Voici la page du pilote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>jQuery Load of Script</title> 
     <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
      google.load("jquery", "1.3.2"); 
     </script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $("#myButton").click(function() { 
        $("#myDiv").load("trackingCode.html"); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <button id="myButton">Click Me</button> 
     <div id="myDiv"></div> 
    </body> 
</html>

Voici le contenu de trackingCode.html:

<script type="text/javascript"> 
    alert("Outside the jQuery ready"); 
    $(function() { 
     alert("Inside the jQuery ready"); 
    }); 
</script>

Cela fonctionne pour moi dans Safari 4.

Mise à jour: Ajout DOCTYPE et html namespace pour faire correspondre le code sur mon environnement de test. Testé avec Firefox 3.6.13 et le code d'exemple fonctionne.

Source

2009-05-20 20:10:42

J'ai compris, merci Tony! Enlever les balises , et a semblé faire l'affaire. – Mike

Je me promenais si je devais faire un appel ajax séparé getJson() parce que j'ai entendu parler de cela .. Mais si cela fonctionne comme ça c'est ok !! J'appellerais deux fois les mêmes requêtes sinon – GorillaApe

Votre code ne fonctionne pas réellement en FF (IE8 - fonctionne bien). Y at-il un moyen de faire fonctionner cela dans ** tous ** les navigateurs? Merci –

Test avec ceci dans trackingCode.html:

<script type="text/javascript"> 

    $(function() { 

     show_alert(); 

     function show_alert() { 
      alert("Inside the jQuery ready"); 
     } 

    }); 
</script>

Source

2009-08-03 11:38:31

Je sais que cela est un peu d'un ancien poste, mais pour tout le monde qui vient à cette page à la recherche d'une solution similaire ...

http://api.jquery.com/jQuery.getScript/

jQuery.getScript(url, [ success(data, textStatus) ]) 
url - Chaîne contenant l'URL à laquelle la demande est envoyée.

success(data, textStatus) - Une fonction de rappel qui est exécutée si la requête réussit.
$.getScript('ajax/test.js', function() { 
    alert('Load was performed.'); 
}); 

Source

2010-02-23 22:07:50 ryan

Eh bien, j'eu le même problème qui ne semblait se passer pour Firefox, et je ne pouvais pas utiliser une autre commande JQuery, sauf pour .load() depuis que je suis en train de modifier la front-end sur les fichiers PHP existants ...

De toute façon, après avoir utilisé la commande .load(), j'ai intégré mon script JQuery dans le code HTML externe qui était chargé, et cela semblait fonctionner. Je ne comprends pas pourquoi le JS que j'ai chargé en haut du document principal n'a pas fonctionné pour le nouveau contenu cependant ...

Source

2010-06-14 03:22:56

Facile, parce que le nouveau contenu n'était pas là quand le script a été exécuté. – Matteo

Cela ne semble pas fonctionner si vous chargez le champ HTML dans un élément créé dynamiquement. Je regarde firebug DOM et il n'y a aucun noeud de script, seulement le HTML et mon noeud CSS.

Quelqu'un a trouvé cela?

Source

2010-06-28 23:51:13 tim

Yup, même problème. – Dex

J'ai dû charger le code HTML, puis dans le rappel, utilisez $ .getScript pour obtenir le javascript. – Dex

J'ai essayé de faire un plugin jquery pour la fonction de chargement html. S'il vous plaît se référer au lien suivant.

http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html

S'il vous plaît me suggère d'améliorer plus.

Merci, Mohan

Source

2010-11-12 15:50:44 Mohan

$("#images").load(location.href+" #images",function(){ 
    $.getScript("js/productHelper.js"); 
});

Source

2010-11-22 21:47:35 sldev

est vraiment $ .getScript() bonne solution dans ce problème;) +1 –

Cela a fait l'affaire pour moi. Voici un exemple que vous pouvez essayer: var frmAcademicCalendar = "frmAcademicCalendar.aspx" if (window.location.href.toLowerCase(). IndexOf (frmAcademicCalendar.toLowerCase())> = 0) { $ ("#IncludeCMSContent") .load ("http://www.example.com #externalContent", function() { $ .getScript ("example.js"); }); } – Evan

Vous avez presque obtenu. Dites-jquery vous voulez charger uniquement le script:

$("#myBtn").click(function() { 
    $("#myDiv").load("trackingCode.html script"); 
});

Source

2011-08-31 00:38:40

Mais cela semble charger seulement et le script. Comment obtenez-vous pour charger le contenu html ET exécuter tout javascript qu'il pourrait contenir? – ThatAintWorking

Une autre version de John Pick's solution juste avant, cela fonctionne bien pour moi:

jQuery.ajax({ 
    .... 
    success: function(data, textStatus, jqXHR) { 
     jQuery(selecteur).html(jqXHR.responseText); 
     var reponse = jQuery(jqXHR.responseText); 
     var reponseScript = reponse.filter("script"); 
     jQuery.each(reponseScript, function(idx, val) { eval(val.text); }); 
    } 
    ... 
});

Source

2011-09-07 07:11:18 Yannick

Ceci est la meilleure solution !, je t'aime @Yannick, vous avez fait ma journée – utiq

Enfin, j'ai trouvé un bon usage de eval – NaveenDA

j'ai pu résoudre ce problème en changeant $(document).ready() à window.onLoad() .

Source

2013-05-20 02:34:28

L'appel jQuery .load() n'exécute pas le JavaScript dans le fichier HTML chargé

Répondre

Questions connexes