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

cela semble être un problème lié au Safari seulement. 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 JavaScript intégré.

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 je obtient ce fonctionnement):

<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 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 j'ai besoin d'être concernés par - les exigences du projet - s'il vous plaît pas de guerres de flamme).

pourquoi Safari ignore-t-il le JavaScript dans le fichier trackingCode.html ?

éventuellement, j'aimerais pouvoir passer des objets JavaScript à ce fichier trackingCode.html à utiliser dans l'appel jQuery ready, mais je voudrais m'assurer que ceci est possible dans tous les navigateurs avant que je vais sur cette route.

77
demandé sur Brett DeWoody 2009-05-21 00:07:50

11 réponses

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 juste le script d'ouverture, le script de fermeture et le code JavaScript dans le HTML que vous chargez?

Voici la page 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 du trackingCode.html:

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

ça marche pour moi dans Safari 4.

mise à jour: Ajout de DOCTYPE et espace de noms html pour correspondre au code de mon environnement de test. Testé avec Firefox 3.6.13 et exemple de code fonctionne.

53
répondu Tony Miller 2015-04-09 12:52:36
$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});
36
répondu xtds 2010-11-22 21:47:35

une autre version de John Pick's solution juste avant, ça me va très bien:

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); } );
   }
   ...
});
21
répondu Yannick 2017-05-23 11:47:01

je me rends compte que c'est un peu un ancien post, mais pour quiconque vient à cette page à la recherche d'une solution similaire...

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

jQuery.getScript( url, [ success(data, textStatus) ] )
  • url - une chaîne contenant L'URL à laquelle la requête 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.');
});
12
répondu ryan 2010-02-24 00:50:53

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 le DOM firebug et il n'y a pas de noeud de script du tout, seulement le HTML et mon noeud CSS.

Quelqu'un a vu ça?

8
répondu tim 2010-09-29 03:04:12

tu l'as presque. Dites à jquery que vous ne voulez charger que le script:

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html script");
});
2
répondu John Pick 2011-08-31 00:38:40

Test avec ceci dans trackingCode.html:

<script type="text/javascript">

    $(function() {

       show_alert();

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

    });
 </script>
2
répondu Aamir Mansoor 2012-11-28 02:13:08

j'ai essayé de faire un plugin jquery pour la fonction de chargement html. Veuillez consulter le lien suivant.

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

s'il vous Plaît me suggérer pour améliorer davantage.

Merci, Mohan

2
répondu Mohan 2013-12-18 14:15:53

Eh bien, j'ai eu le même problème qui ne semblait se produire que pour Firefox, et je ne pouvais pas utiliser une autre commande JQuery sauf pour .load () puisque je modifiais le front-end sur les fichiers PHP existants...

de toute façon, après avoir utilisé le .la commande load (), j'ai intégré mon script JQuery dans le HTML externe qui se chargeait, et il 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...

0
répondu Victor G. Reano 2010-06-14 03:22:56

j'ai pu corriger cette question en remplaçant $(document).ready() par window.onLoad() .

0
répondu Casey Dwayne 2013-05-20 02:34:28

j'ai couru dans ceci où les scripts chargeraient une fois, mais les appels répétés ne lanceraient pas le script.

Il s'est avéré être un problème avec l'aide de .html () pour afficher un indicateur d'attente et ensuite enchaîner .load () après.

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

quand je leur ai fait des appels séparés, mes scripts en ligne se sont chargés à chaque fois 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 la recherche, notez qu'il existe deux versions de .load ()

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

un complexe .appel load () dispose d'un sélecteur tel que load("page.html #contenu"). Lorsqu'il est utilisé de cette façon, jQuery filtre délibérément les étiquettes de script comme discuté dans les articles comme celui-ci: https://forum.jquery.com/topic/the-load-function-and-script-blocks#14737000000752785 dans ce cas, les scripts ne s'exécutent jamais, pas même une fois.

0
répondu efreed 2018-08-21 18:22:47