web-dev-qa-db-fra.com

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

Cela semble être un problème lié à Safari uniquement. 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 de faire exécuter le code JavaScript incorporé.

Le code que j'essaie d'utiliser est le suivant:

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

trackingCode.html ressemble à ceci (simple maintenant, mais se développera une fois/si cela fonctionne):

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

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 qui doit me préoccuper - exigences du projet - s'il vous plaît, pas de guerres de flammes).

Avez-vous une idée de la raison pour laquelle Safari ignore le code JavaScript dans le fichier trackingCode.html?

Finalement, j'aimerais pouvoir transmettre des objets JavaScript à ce fichier trackingCode.html afin de les utiliser dans l'appel jQuery Ready, mais j'aimerais m'assurer que cela est possible dans tous les navigateurs avant de suivre cette voie.

jqueryajaxsafari
78
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 chargez 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 de l'espace de noms DOCTYPE et html pour correspondre au code de mon environnement de test. Testé avec Firefox 3.6.13 et le code d'exemple fonctionne.

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

Une autre version de La solution de John Pick juste avant, cela me convient:

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); } );
   }
   ...
});
22
Yannick

Je réalise que ceci est un peu un article plus ancien, mais pour tous ceux qui consultent cette page cherchent 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 aboutit.

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});
13
ryan

Cela ne semble pas fonctionner si vous chargez le champ HTML dans un élément créé dynamiquement.

$('body').append('<div id="loader"></div>');
$('#loader').load('htmlwithscript.htm');

Je regarde firebug DOM et il n’existe aucun nœud de script, mais uniquement le HTML et mon nœud CSS.

Quelqu'un a rencontré cela?

9
tim

Vous l'avez presque. Dites à jQuery que vous voulez charger uniquement le script:

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

Testez avec ceci dans trackingCode.html:

<script type="text/javascript">

    $(function() {

       show_alert();

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

    });
 </script>
2
Patrick Fritsch

J'ai essayé de faire un plugin JQuery pour la fonction de chargement HTML. Veuillez vous référer au lien suivant.

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

Suggérez-moi de l'améliorer davantage.

Merci, Mohan

2
Mohan

J'ai couru dans ceci où les scripts chargeraient une fois, mais les appels répétés n'exécuteraient pas le script.

Il s’est avéré problématique d’utiliser .html () pour afficher un indicateur d’attente, puis d’enchaîner .load () après celui-ci.

// Processes scripts as expected once per page load, but not for repeat calls
$("#id").html("<img src=wait.gif>").load("page.html");

Lorsque je les appelais séparément, mes scripts en ligne étaient chargés comme prévu.

// Without chaining html and load together, scripts are processed as expected every time
$("#id").html("<img src=wait.gif>");
$("#id").load("page.html");

Pour des recherches plus approfondies, notez qu’il existe deux versions de .load ().

Un simple appel .load () (sans sélecteur après l'URL) est simplement un raccourci pour appeler $ .ajax () avec dataType: "html", prendre le contenu du retour et appeler .html () pour mettre ce contenu dans le DOM . Et la documentation de dataType: "html" indique clairement que "les balises de script incluses sont évaluées lorsqu'elles sont insérées dans le DOM". http://api.jquery.com/jquery.ajax/ So .load () exécute officiellement les scripts en ligne.

Un appel complexe .load () a un sélecteur tel que load ("page.html #content"). Utilisé de cette manière, jQuery filtre délibérément les balises de script comme indiqué dans les articles suivants: https://forum.jquery.com/topic/the-load-function-and-script-blocks#14737000000752785 In this Dans ce cas, les scripts ne sont jamais exécutés, pas une seule fois.

0
efreed

Eh bien, j’avais le même problème qui semblait ne se produire que pour Firefox, et je ne pouvais utiliser une autre commande JQuery à l’exception de .load () car je modifiais le front-end sur des fichiers existants PHP ...

Quoi qu'il en soit, après avoir utilisé la commande .load (), j'ai intégré mon script JQuery dans le code HTML externe en cours de chargement et cela a semblé 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 ...

0
Victor G. Reano

J'ai pu résoudre ce problème en remplaçant $(document).ready() par window.onLoad().

0
Casey Dwayne