wake-up-neo.com

Wie füge ich nach dem Laden der Seite dynamisch ein <script> -Tag über jQuery ein?

Ich habe Probleme damit, das zum Laufen zu bringen. Ich habe zuerst versucht, meine Skript-Tags als Zeichenfolgen festzulegen und sie dann mit jquery replaceWith () nach dem Laden der Seite zum Dokument hinzuzufügen:

var a = '<script type="text/javascript">some script here</script>';
$('#someelement').replaceWith(a);

Aber ich habe String-Literal-Fehler für diese Variable. Ich habe dann versucht, die Zeichenfolge wie folgt zu codieren:

var a = '&left;script type="text/javascript"&gt;some script here&lt;\/script&gt;';

wenn Sie dies jedoch an replaceWith() senden, wird nur diese Zeichenfolge an den Browser ausgegeben.

Kann mir jemand bitte mitteilen, wie Sie nach dem Laden der Seite, idealerweise über jQuery, dynamisch ein <script> - Tag in den Browser einfügen würden?

javascriptjqueryscript-tagjavascript-injection
94
Doug

Sie können das Skript in eine separate Datei einfügen und dann $.getScript um es zu laden und auszuführen.

Beispiel:

$.getScript("test.js", function(){
    alert("Running test.js");
});
97
Rocket Hazmat

Versuche Folgendes:

<script type="text/javascript">
// Use any event to append the code
$(document).ready(function() 
{
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "http://scriptlocation/das.js";
    // Use any selector
    $("head").append(s);
});

http://api.jquery.com/append

61
Bassem

Hier ist die richtige Vorgehensweise für moderne (2014) JQuery:

$(function () {
  $('<script>')
    .attr('type', 'text/javascript')
    .text('some script here')
    .appendTo('head');
})

oder wenn du wirklich ein div ersetzen willst, könntest du folgendes tun:

$(function () {
  $('<script>')
    .attr('type', 'text/javascript')
    .text('some script here')
    .replaceAll('#someelement');
});
32
jcoffland

Ein einfacherer Weg ist:

$('head').append('<script type="text/javascript" src="your.js"></script>');

Sie können dieses Formular auch zum Laden von CSS verwenden.

9
iman

Diese Antwort ist technisch ähnlich oder entspricht der Antwort von jcoffland. Ich habe gerade eine Abfrage hinzugefügt, um festzustellen, ob ein Skript bereits vorhanden ist oder nicht. Ich brauche das, weil ich in einer Intranet-Website mit einigen Modulen arbeite, von denen einige Skripte freigeben oder eigene mitbringen, aber diese Skripte müssen nicht jedes Mal neu geladen werden. Ich benutze dieses Snippet seit mehr als einem Jahr in der Produktionsumgebung, es funktioniert wie ein Charme. Kommentar an mich selbst: Ja, ich weiß, es wäre richtiger zu fragen, ob eine Funktion existiert ... :-)

if (!$('head > script[src="js/jquery.searchable.min.js"]').length) {
    $('head').append($('<script />').attr('src','js/jquery.searchable.min.js'));
}
5
ddlab

Beispiel:

var a = '<script type="text/javascript">some script here</script>';
$('#someelement').replaceWith(a);

Es sollte funktionieren. Ich versuchte es; gleiches Ergebnis. Aber als ich das benutzte:

var length = 1;
var html = "";
for (var i = 0; i < length; i++) {
    html += '<div id="codeSnippet"></div>';
    html += '<script type="text/javascript">';
    html += 'your script here';
    html += '</script>';
}
$('#someElement').replaceWith(a);

Das hat bei mir funktioniert.

Edit: Ich habe den #someelement Vergessen (übrigens möchte ich #someElement Wegen Konventionen verwenden)

Das Wichtigste hier ist das + =, damit der HTML-Code hinzugefügt und nicht ersetzt wird.

Hinterlasse einen Kommentar, wenn es nicht funktioniert hat. Ich würde dir gerne helfen!

2
santinobonora

Es gibt eine Problemumgehung, die eher wie ein Hack klingt, und ich stimme zu, dass dies nicht die eleganteste Methode ist, aber zu 100% funktioniert:

Sagen Sie, Ihre AJAX Antwort ist so etwas wie

<b>some html</b>
<script>alert("and some javscript")

Beachten Sie, dass ich das schließende Tag absichtlich übersprungen habe. Gehen Sie dann in dem Skript, das das obige lädt, wie folgt vor:

$.ajax({
    url: "path/to/return/the-above-js+html.php",
    success: function(newhtml){
        newhtml += "<";
        newhtml += "/script>";
        $("head").append(newhtml);
    }
});

Frag mich einfach nicht warum :-) Dies ist eines der Dinge, zu denen ich aufgrund verzweifelter, fast zufälliger Versuche gekommen bin und die fehlschlagen.

Ich habe keine vollständigen Vorschläge, wie es funktioniert, aber interessanterweise funktioniert es NICHT, wenn Sie das schließende Tag in einer Zeile anhängen.

In Zeiten wie diesen habe ich das Gefühl, erfolgreich durch Null geteilt zu sein.

2
Ash

Hier ist ein viel klarerer Weg - jQuery ist nicht erforderlich - der ein Skript als letztes untergeordnetes Element von <body> Hinzufügt:

document.body.innerHTML +='<script src="mycdn.js"><\/script>'

Aber wenn Sie hinzufügen möchten und laden Skripte verwenden Rocket Hazmat Methode .

0
Gagik Sargsyan