jQuery .load() appel de ne pas exécuter le code JavaScript dans HTML chargé de fichier

Cela semble être un problème lié à Safari seulement. J'ai essayé 4 sur Mac et 3 sur Windows et je suis encore avoir pas de chance.

Je suis en train de charger un fichier HTML externe et ont le JavaScript qui est incorporé exécuter.

Le code que j'utilise est: est-ce

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

trackingCode.html ressemble à ça (simple maintenant, mais vous développez 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>

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

Des idées sur le pourquoi de Safari, c'est ignorer le JavaScript dans le trackingCode.html fichier?

Finalement, je voudrais être en mesure de passer des objets JavaScript à ce trackingCode.html fichier pour être utilisé dans le jQuery prêt appel, mais je voudrais être sûr que cela est possible dans tous les navigateurs avant de m'en aller sur la route.

InformationsquelleAutor Mike | 2009-05-20

Vous chargez une page HTML dans votre div, y compris le html, head et body balises. Qu'advient-il si vous ne la charge et ont juste le script d'ouverture, de clôture du script et du code JavaScript dans le code HTML que vous avez la charge?

Voici le pilote de la page:

<!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 la balise DOCTYPE html et de l'espace de noms afin de correspondre au code sur mon environnement de test. Testé avec Firefox 3.6.13 et un exemple de code qui fonctionne.

Il a obtenu, grâce à Tony! Retrait de la <html>, <head> et <body> balises semblait faire l'affaire.
j'errais de savoir si je dois faire un autre appel ajax getJson() parce que j'ai entendu parler de cela.. Mais si ça fonctionne comme ça, c'est ok!! Je voudrais appeler les requêtes mêmes deux fois sinon
Votre code ne fonctionne pas dans FF (IE8 - fonctionne bien). Est-il un moyen de faire ce travail dans tous les navigateurs? Merci
Galuchka j'avais encore ces fichiers dans mon poste de travail personnel. Sans modification, ils ont produit le comportement correct. J'utilise Firefox 3.6.13 sous Windows 7.

InformationsquelleAutor Tony Miller

38
```
$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});
```
- est vraiment $.getScript() est la bonne solution à ce problème 😉 +1
- Cela a fait l'affaire pour moi. Voici un exemple que vous pouvez essayer: var frmAcademicCalendar = "frmAcademicCalendar.aspx" si (la fenêtre.emplacement.href.toLowerCase().indexOf(frmAcademicCalendar.toLowerCase()) >= 0) { $("#IncludeCMSContent").load("example.com #externalContent",function() { $.getScript("example.js"); }); }
InformationsquelleAutor xtds

Une autre version de Jean Choisir la solution de juste avant, cela fonctionne très 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); } );
   }
   ...
});

C'est la meilleure solution!, Je vous aime @Yannick, vous avez fait ma journée
J'ai enfin trouvé une bonne utilisation de eval

InformationsquelleAutor Yannick

13

Je me rends compte que c'est un peu d'un vieux post, mais pour la personne qui vient vers cette page à la recherche d'une solution similaire...

http://api.jquery.com/jQuery.getScript/
```
jQuery.getScript( url, [ success(data, textStatus) ] )
```
- url - Une chaîne de caractères contenant l'URL vers laquelle la demande est envoyée.
- success(data, textStatus) - Une fonction de callback qui est exécutée si la demande aboutit.
```
$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});
```
InformationsquelleAutor ryan
9

Cela ne semble pas fonctionner si vous êtes en train de charger le champ HTML dans un créé dynamiquement élément.
```
$('body').append('<div id="loader"></div>');
$('#loader').load('htmlwithscript.htm');
```
Je regarde firebug DOM et il n'y a pas de script nœud à tous, seulement l'HTML et mon CSS nœud.

Quelqu'un a rencontré ce?
- Yup, même problème.
- J'ai dû charger le code html, puis dans le rappel, utiliser $.getScript pour obtenir le javascript.
- Mec! Vous avez résolu mon problème d'environ 8 ans plus tôt. Merci 😀
InformationsquelleAutor
2

Vous avez presque obtenu. Dire jquery vous voulez charger uniquement le script:
```
$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html script");
});
```
- Mais cela semble être la SEULE à charger et le script. Comment voulez-vous obtenir pour charger le contenu html ET exécuter javascript, il peut contenir des?
InformationsquelleAutor John Pick

En trackingCode.html:

<script type="text/javascript">

    $(function() {

       show_alert();

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

    });
 </script>

InformationsquelleAutor

2

J'ai essayer de faire un plugin jquery html pour fonction de chargement. Veuillez consulter le lien suivant.

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

Veuillez me suggérer pour améliorer davantage.

Grâce,
Mohan

InformationsquelleAutor Mohan
0

Bien j'ai eu le même problème que ne semblait se passer pour Firefox, et je ne pouvais pas utiliser un autre JQuery commande sauf pour .load() depuis que j'ai été la modification de l'avant la fin de l'existant sur les fichiers PHP...

De toute façon, après l'utilisation de l' .load() de la commande, j'ai incorporé mon script JQuery dans le HTML externe qui étaient chargés, et ça semblait fonctionner. Je ne comprends pas pourquoi le JS que j'ai chargé dans le haut du document principal ne fonctionne pas pour le nouveau contenu, mais...
- Facile, parce que le nouveau contenu n'était pas là lorsque le script ont été exécutés.
InformationsquelleAutor Victor G. Reano
0

J'ai été en mesure de résoudre ce problème en changeant $(document).ready() à window.onLoad().

InformationsquelleAutor Casey Dwayne
0

J'ai couru dans ce où les scripts de chargement une fois, mais des appels répétés ne serait pas exécuter le script.

Il s'est avéré être un problème avec l'aide de .html() pour afficher une attente de l'indicateur, puis l'enchaînement .load() après elle.
```
//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 distincts, mon inline scripts chargés de tous les temps 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 de prendre le retour de contenu et d'appel .html() pour mettre le contenu dans les DOM. Et de la documentation pour dataType:"html" stipule clairement "inclus des balises de script sont évalués lors de leur insertion dans les DOM." http://api.jquery.com/jquery.ajax/ Donc .load() a officiellement exécute les scripts inline.

Un complexe .load() appel a un sélecteur telles que la charge("page.html #contenu"). Lorsque utilisé de cette façon, jQuery dessein de filtrer les balises de script tel que 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 jamais exécuter, même pas une fois.

InformationsquelleAutor efreed

Vous devez vous connecter pour publier un commentaire.