it-swarm.com.de

Ausführen von <script> in <div> abgerufen von AJAX

Es gibt ein Div namens "Content":

<div id="content"></div>

Es sollte von AJAX mit Daten aus einer PHP - Datei gefüllt werden, einschließlich eines <script>-Tags. Das Skript in diesem Tag wird jedoch nicht ausgeführt.

<div id="content"><!-- After AJAX loads the stuff that goes here -->
   <script type="text/javascript">
     //code
   </script>
   <!-- More stuff that DOES work here -->
</div>
86
JCOC611

Als DOM-Text eingefügtes JavaScript wird nicht ausgeführt. Sie können jedoch das dynamic-Skriptmuster verwenden, um Ihr Ziel zu erreichen. Die grundlegende Idee ist, das Skript, das Sie ausführen möchten, in eine externe Datei zu verschieben und ein Skript-Tag zu erstellen, wenn Sie Ihre Ajax-Antwort erhalten. Dann legen Sie das src-Attribut Ihres Skript-Tags fest und voila, es lädt und führt das externe Skript aus.

Dieser andere StackOverflow-Beitrag kann auch für Sie hilfreich sein: Können Skripte mit innerHTML eingefügt werden? .

60
Chocula

Ich habe diesen Code verwendet, es funktioniert gut

var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
    eval(arr[n].innerHTML)//run script inside div
56
Firas Nizam

Wenn Sie einen Skriptblock in Ihr div über Ajax laden, gehen Sie wie folgt vor:

<div id="content">
    <script type="text/javascript">
    function myFunction() {
      //do something
    }
    myFunction();
    </script>
</div>

... es aktualisiert einfach das DOM Ihrer Seite, myFunction () wird nicht unbedingt aufgerufen. 

Sie können eine Ajax-Callback-Methode wie die in der jQuery ajax () - Methode verwenden, um festzulegen, was ausgeführt werden soll, wenn die Anforderung abgeschlossen ist. 

Was Sie tun, unterscheidet sich vom Laden einer Seite mit JavaScript aus dem get-go (das ausgeführt wird).

Ein Beispiel für die Verwendung des Erfolgsrückrufs und des Fehlerrückrufs nach dem Abrufen von Inhalt:

  $.ajax({
    type: 'GET',
    url: 'response.php',
    timeout: 2000,
    success: function(data) {
      $("#content").html(data);
      myFunction();
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      alert("error retrieving content");
    }

Eine andere schnelle und schmutzige Methode ist die Verwendung von eval () , um Skriptcode auszuführen, den Sie als DOM-Text eingefügt haben, wenn Sie nicht jQuery oder eine andere Bibliothek verwenden möchten.

12

Hier ist das Skript, das alle Skript-Tags im Text auswertet.

function evalJSFromHtml(html) {
  var newElement = document.createElement('div');
  newElement.innerHTML = html;

  var scripts = newElement.getElementsByTagName("script");
  for (var i = 0; i < scripts.length; ++i) {
    var script = scripts[i];
    eval(script.innerHTML);
  }
}

Rufen Sie diese Funktion einfach auf, nachdem Sie Ihr HTML vom Server erhalten haben. Seien Sie gewarnt: Die Verwendung von eval kann gefährlich sein.

Demo: http://plnkr.co/edit/LA7OPkRfAtgOhwcAnLrl?p=preview

8
Evgenii

Dies funktioniert bei mir mit jQuery "nur", vorausgesetzt, Sie versuchen nicht, eine Teilmenge des von XHR zurückgegebenen HTML an das Dokument anzuhängen. (Siehe diesen Fehlerbericht zeigt das Problem mit jQuery.)

Hier ein Beispiel, wie es funktioniert:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>test_1.4</title> 
    <script type="text/javascript" charset="utf-8" src="jquery.1.4.2.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
        var snippet = "<div><span id='a'>JS did not run<\/span><script type='text/javascript'>" +
        "$('#a').html('Hooray! JS ran!');" +
        "<\/script><\/div>";
        $(function(){
            $('#replaceable').replaceWith($(snippet));
        });
    </script> 
</head> 
<body> 
    <div id="replaceable">I'm going away.</div> 
</body> 
</html>

Hier ist das Äquivalent des Vorstehenden: http://jsfiddle.net/2CTLH/

4
Phrogz

Wenn Sie etwas injizieren, für das das Skript-Tag erforderlich ist, erhalten Sie möglicherweise einen nicht erfassten Syntaxfehler und sagen ein ungültiges Token . Um dies zu vermeiden, entgehen Sie den Schrägstrichen in Ihren schließenden Skript-Tags. dh;

var output += '<\/script>';

Dasselbe gilt für alle schließenden Tags, z. B. für Formular-Tags.

2
TommyRay

Hier ist eine Funktion, die Sie zum Analysieren von AJAX -Antworten verwenden können, insbesondere wenn Sie minifiedjs verwenden und das zurückgegebene Javascript ausführen möchten oder die Skripts nur analysieren möchten, ohne sie dem DOM hinzuzufügen. Außerdem werden auch Ausnahmefehler behandelt. Ich habe diesen Code in der php4sack-Bibliothek verwendet und ist außerhalb der Bibliothek nützlich.

function parseScript(_source) {
    var source = _source;
    var scripts = new Array();

    // Strip out tags
    while(source.toLowerCase().indexOf("<script") > -1 || source.toLowerCase().indexOf("</script") > -1) {
        var s = source.toLowerCase().indexOf("<script");
        var s_e = source.indexOf(">", s);
        var e = source.toLowerCase().indexOf("</script", s);
        var e_e = source.indexOf(">", e);

        // Add to scripts array
        scripts.Push(source.substring(s_e+1, e));
        // Strip from source
        source = source.substring(0, s) + source.substring(e_e+1);
    }

    // Loop through every script collected and eval it
    for(var i=0; i<scripts.length; i++) {
        try {
          if (scripts[i] != '')
          {         
            try  {          //IE
                  execScript(scripts[i]);   
      }
      catch(ex)           //Firefox
      {
        window.eval(scripts[i]);
      }   

            }  
        }
        catch(e) {
            // do what you want here when a script fails
         // window.alert('Script failed to run - '+scripts[i]);
          if (e instanceof SyntaxError) console.log (e.message+' - '+scripts[i]);
                    }
    }
// Return the cleaned source
    return source;
 }
2

Meine Schlussfolgerung ist, dass HTML keine NESTED SCRIPT-Tags zulässt. Wenn Sie JavaScript zum Einfügen von HTML-Code verwenden, der Skript-Tags enthält, wird dies nicht funktionieren, da das JavaScript auch in einem Skript-Tag enthalten ist. Sie können es mit dem nächsten Code testen und Sie werden feststellen, dass es nicht funktionieren wird. Der Anwendungsfall ist, dass Sie einen Dienst mit AJAX oder ähnlichem aufrufen. Sie erhalten HTML-Code, und Sie möchten ihn in das HTML-DOM einfügen. Wenn der eingefügte HTML-Code SCRIPT-Tags enthält, wird dies nicht funktionieren. 

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body></body><script>document.getElementsByTagName("body")[0].innerHTML = "<script>console.log('hi there')</script>\n<div>hello world</div>\n"</script></html>
0
Antonio Martin

Ich hatte hier einen ähnlichen Beitrag, addEventListener load auf ajax load OHNE jquery

Wie ich es gelöst habe, war das Einfügen von Aufrufen von Funktionen innerhalb meiner stateChange-Funktion. Die Seite, die ich eingerichtet hatte, bestand aus 3 Schaltflächen, mit denen 3 verschiedene Seiten in die contentArea geladen wurden. Da ich wissen musste, welche Taste zum Laden der Seite 1, 2 oder 3 gedrückt wurde, konnte ich mit den if/else-Anweisungen leicht feststellen, welche Seite geladen wird und welche Funktion dann ausgeführt wird. Ich habe versucht, verschiedene Button-Listener zu registrieren, die nur funktionieren, wenn die bestimmte Seite aufgrund von Element-IDs geladen wurde.

so...

wenn (Seite1 geladen wird, pageload = 1) Führen Sie die Funktion registerListeners1 aus

dann dasselbe für Seite 2 oder 3.

0
Richard Chase

Dies funktionierte für mich, indem ich eval in jedem Skriptinhalt von ajax .done aufrief:

$.ajax({}).done(function (data) {      
    $('div#content script').each(function (index, element) { eval(element.innerHTML); 
})  

Hinweis: Ich habe keine Parameter in $ .ajax geschrieben, die Sie anpassen müssen nach deinem Ajax.

0
shivgre