it-swarm.com.de

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

Dies scheint ein Problem zu sein, das nur mit Safari zusammenhängt. Ich habe 4 auf 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 zu verwenden versuche, ist folgender:

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

trackingCode.html sieht so aus (jetzt einfach, aber einmal erweitern/wenn ich das funktioniere):

<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 sowohl Warnmeldungen in IE (6 & 7) als auch in Firefox (2 & 3). Ich kann jedoch die Meldungen in Safari nicht sehen (der letzte Browser, um den ich mich kümmern muss - Projektanforderungen - bitte keine Flammenkriege).

Haben Sie irgendwelche Gedanken darüber, warum Safari das JavaScript in der trackingCode.html-Datei ignoriert?

Schließlich möchte ich in der Lage sein, JavaScript-Objekte an diese trackingCode.html-Datei zu übergeben, die innerhalb des Aufrufs von jQuery ready verwendet werden sollen. Ich möchte jedoch sicherstellen, dass dies in allen Browsern möglich ist, bevor ich diesen Weg beschreibe.

78
Mike

Sie laden eine komplette HTML-Seite in Ihr div, einschließlich der Tags HTML, head und body. Was passiert, wenn Sie das Laden durchführen und nur das Startskript, das Abschlussskript und der JavaScript-Code in dem HTML-Code haben, den Sie laden?

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>

Das funktioniert für mich in Safari 4.

Update: DOCTYPE- und HTML-Namespace wurde hinzugefügt, um den Code in meiner Testumgebung abzugleichen. Getestet mit Firefox 3.6.13 und Beispielcode funktioniert.

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

Eine andere Version von John Picks Lösung kurz vorher funktioniert dies 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); } );
   }
   ...
});
22
Yannick

Mir ist klar, dass dies ein älterer Beitrag ist, aber für alle, die zu dieser Seite kommen und nach einer ähnlichen Lösung suchen ...

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

jQuery.getScript( url, [ success(data, textStatus) ] )
  • url - Eine Zeichenfolge mit der URL, 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.');
});
13
ryan

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 sehe mir Firebug DOM an und es gibt überhaupt keinen Skriptknoten, nur den HTML- und meinen CSS-Knoten.

Hat jemand das gefunden?

9
tim

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

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

Testen Sie dies in trackingCode.html:

<script type="text/javascript">

    $(function() {

       show_alert();

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

    });
 </script>
2
Patrick Fritsch

Ich habe versucht, ein Jquery-Plugin für die HTML-Ladefunktion zu erstellen. Bitte beachten Sie den folgenden Link.

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

Bitte schlagen Sie mir vor, es weiter zu verbessern.

Vielen Dank. Mohan

2
Mohan

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

Bei der Verwendung von .html () zur Anzeige eines Warteanzeigers erwies es sich als problematisch, danach wurde .load () verkettet.

// 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 einzeln anrief, wurden meine Inline-Skripts wie erwartet jedes Mal 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 Aufruf von .load () (ohne einen Selektor nach der URL) ist einfach eine Abkürzung für den Aufruf von $ .ajax () mit dem Datentyp "html" und den Rückgabeinhalt . Und die Dokumentation für dataType: "html" gibt eindeutig an, dass "eingeschlossene Skript-Tags ausgewertet werden, wenn sie in das DOM eingefügt werden." http://api.jquery.com/jquery.ajax/ So führt .load () offiziell Inline-Skripts aus.

Ein komplexer Aufruf von .load () hat einen Selektor wie load ("page.html #content"). Bei dieser Verwendung filtert jQuery gezielt Skript-Tags heraus, wie in Artikeln wie diesem erläutert: https://forum.jquery.com/topic/the-load-function-and-script-blocks#14737000000752785 In diesem Fall werden die Skripts nicht einmal ausgeführt.

0
efreed

Nun, ich hatte das gleiche Problem, das nur bei Firefox vorkam, und ich konnte keinen anderen JQuery-Befehl außer .load () verwenden, da ich das Front-End an Exisitng-Dateien PHP modifizierte.

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

0
Victor G. Reano

Ich konnte dieses Problem beheben, indem ich $(document).ready() in window.onLoad() änderte.

0
Casey Dwayne