Der Aufruf von jQuery .load () führt kein JavaScript in der geladenen HTML-Datei aus

83

Dies scheint ein Problem zu sein, das nur mit Safari zusammenhängt. Ich habe 4 unter Mac und 3 unter Windows ausprobiert und habe immer noch kein Glück.

Ich versuche, eine externe HTML-Datei zu laden und das eingebettete JavaScript ausführen zu lassen.

Der Code, den ich verwenden möchte, lautet wie folgt:

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

trackingCode.html sieht so aus (jetzt einfach, wird aber einmal erweitert / wenn ich das zum Laufen bringe):

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

Ich sehe beide Warnmeldungen in IE (6 & 7) und Firefox (2 & 3). Ich kann die Nachrichten in Safari jedoch nicht sehen (der letzte Browser, mit dem ich mich befassen muss - Projektanforderungen - bitte keine Flammenkriege).

Irgendwelche Gedanken darüber, warum Safari das JavaScript in der trackingCode.htmlDatei ignoriert ?

Schließlich möchte ich in der Lage sein, JavaScript-Objekte an diese trackingCode.htmlDatei zu übergeben, um sie im jQuery-fähigen Aufruf zu verwenden, aber ich möchte sicherstellen, dass dies in allen Browsern möglich ist, bevor ich diesen Weg gehe.

jquery ajax safari Mike
quelle

Antworten:

56

Sie laden eine ganze HTML-Seite in Ihr div, einschließlich der HTML-, Head- und Body-Tags. Was passiert, wenn Sie das Laden durchführen und nur das Eröffnungsskript, das Schließskript und den JavaScript-Code in dem von Ihnen geladenen HTML haben?

Hier ist die Treiberseite:

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

Hier ist der Inhalt von trackingCode.html:

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

Dies funktioniert bei mir in Safari 4.

Update: DOCTYPE- und HTML-Namespace hinzugefügt, um dem Code in meiner Testumgebung zu entsprechen. Getestet mit Firefox 3.6.13 und Beispielcode funktioniert.

Tony Miller
quelle
1
Verstanden, danke Tony! Das Entfernen der Tags <html>, <head> und <body> schien den Trick zu tun.
Mike
1
Ich war gespannt, ob ich einen separaten Ajax-Aufruf getJson () machen sollte, weil ich davon gehört habe. Aber wenn es so funktioniert, ist es in Ordnung !! Ich würde die gleichen Abfragen sonst zweimal
anrufen
2
Ihr Code funktioniert in FF nicht wirklich (IE8 - funktioniert einwandfrei). Gibt es eine Möglichkeit, dies in allen Browsern zum Laufen zu bringen? Danke
1
@ Maxim Galushka Ich hatte diese Dateien immer noch auf meiner persönlichen Workstation. Ohne Änderung erzeugten sie das richtige Verhalten. Ich benutze Firefox 3.6.13 unter Windows 7.
Tony Miller
41 
$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});
xtds
quelle
Das hat den Trick für mich getan. Hier ist ein Beispiel, das Sie ausprobieren können: var frmAcademicCalendar = "frmAcademicCalendar.aspx" if (window.location.href.toLowerCase (). IndexOf (frmAcademicCalendar.toLowerCase ())> = 0) {$ ("# IncludeCMSContent"). load (" example.com #externalContent", function () {$ .getScript ("example.js");}); }
Evan
25

Eine andere Version von John Picks Lösung kurz zuvor, das funktioniert gut für mich:

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); } );
   }
   ...
});
Yannick
quelle
2
Dies ist die beste Lösung! Ich liebe dich @Yannick, du hast meinen Tag gemacht
utiq
15

Mir ist klar, dass dies ein älterer Beitrag ist, aber für jeden, der auf diese Seite kommt und nach einer ähnlichen Lösung sucht ...

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

jQuery.getScript( url, [ success(data, textStatus) ] )

  • url - Eine Zeichenfolge, die die URL enthält, an die die Anforderung gesendet wird.

  • success(data, textStatus) - Eine Rückruffunktion, die ausgeführt wird, wenn die Anforderung erfolgreich ist.

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});
Ryan
quelle
11

Dies scheint nicht zu funktionieren, wenn Sie das HTML-Feld in ein dynamisch erstelltes Element laden.

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

Ich schaue auf Firebug DOM und es gibt überhaupt keinen Skriptknoten, nur den HTML- und meinen CSS-Knoten.

Ist jemand darauf gestoßen?

tim
quelle
Ich musste das HTML laden und dann im Rückruf $ .getScript verwenden, um das Javascript zu erhalten.
Dex
1
Kumpel! Sie haben mein Problem ungefähr 8 Jahre zuvor gelöst. Danke: D
Skorek
3

Du hast es fast geschafft. Sagen Sie jquery, dass Sie nur das Skript laden möchten:

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html script");
});
John Pick
quelle
7
Dies scheint aber NUR zu laden und das Skript. Wie bringt man es dazu, den HTML-Inhalt zu laden UND eventuell darin enthaltenes Javascript auszuführen?
ThatAintWorking
2

Testen Sie dies in trackingCode.html:

<script type="text/javascript">

    $(function() {

       show_alert();

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

    });
 </script>
Aamir
quelle
1

Ich bin darauf gestoßen, wo die Skripte einmal geladen wurden, aber wiederholte Aufrufe das Skript nicht ausführen würden.

Es stellte sich heraus, dass es ein Problem war, mit .html () eine Warteanzeige anzuzeigen und danach .load () zu verketten.

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

Wenn ich sie separat anrief, wurden meine Inline-Skripte jedes Mal wie erwartet geladen.

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

Beachten Sie für weitere Untersuchungen, dass es zwei Versionen von .load () gibt.

Ein einfacher .load () -Aufruf (ohne Selektor nach der URL) ist einfach eine Abkürzung für den Aufruf von $ .ajax () mit dem Datentyp: "html" und das Aufnehmen des zurückgegebenen Inhalts und das Aufrufen von .html (), um diesen Inhalt in das DOM einzufügen . In der Dokumentation zu dataType: "html" heißt es eindeutig: "Eingeschlossene Skript-Tags werden beim Einfügen in das DOM ausgewertet." http://api.jquery.com/jquery.ajax/ Also .load () führt offiziell Inline-Skripte aus.

Ein komplexer .load () -Aufruf verfügt über einen Selektor wie load ("page.html #content"). Auf diese Weise filtert jQuery Skript-Tags gezielt heraus, wie in Artikeln wie diesem beschrieben: https://forum.jquery.com/topic/the-load-function-and-script-blocks#14737000000752785 In diesem Fall werden die Skripte niemals ausgeführt laufen, nicht einmal.

efreed
quelle
0

Nun, ich hatte das gleiche Problem, das nur bei Firefox auftrat, und ich konnte außer .load () keinen anderen JQuery-Befehl verwenden, da ich das Front-End für vorhandene PHP-Dateien geändert habe ...

Nachdem ich den Befehl .load () verwendet hatte, bettete ich mein JQuery-Skript in den externen HTML-Code ein, der geladen wurde, und es schien zu funktionieren. Ich verstehe nicht, warum das JS, das ich oben im Hauptdokument geladen habe, für den neuen Inhalt nicht funktioniert hat ...

Victor G. Reano
quelle
Einfach, da der neue Inhalt nicht vorhanden war, als das Skript ausgeführt wurde.
Matteo
0

Ich konnte dieses Problem beheben, indem ich $(document).ready()zu wechselte window.onLoad().

Casey Dwayne
quelle
0

@Efreed Antwort anheften ...

Ich habe benutzt .load('mypage.html #theSelectorIwanted') , um Inhalte von einer Seite per Selektor aufzurufen, aber das bedeutet, dass die darin enthaltenen Inline-Skripte nicht ausgeführt werden.

Stattdessen konnte ich mein Markup so ändern, dass '#theSelectorIwanted'es zu einer eigenen Datei wurde, die ich verwendet habe

load('theSelectorIwanted.html`, function() {});

und es lief die Inline-Skripte ganz gut.

Nicht jeder hat diese Option, aber dies war eine schnelle Lösung, um dahin zu gelangen, wo ich wollte!

RCNeil
quelle