Jak dynamicznie wstawić tag <script> przez jQuery po załadowaniu strony?

Mam problemy z uruchomieniem tego. Najpierw próbowałem ustawić moje tagi skryptu jako ciągi, a następnie użyć jquery replaceWith (), aby dodać je do dokumentu po załadowaniu strony:

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

Ale dostałem literalne błędy w tej zmiennej. Następnie próbowałem zakodować ciąg w następujący sposób:

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

ale wysyłanie tego do replaceWith()wyprowadza tylko ten ciąg do przeglądarki.

Czy ktoś może mi powiedzieć, jak byś się zajął dynamicznym dodawaniem <script>tagu do przeglądarki po załadowaniu strony, najlepiej przez jQuery?

Możesz umieścić skrypt w osobnym pliku, a następnie użyć go $.getScriptdo załadowania i uruchomienia.

Przykład:

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

Spróbuj wykonać następujące czynności:

<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

Oto poprawny sposób na zrobienie tego z nowoczesnym (2014) JQuery:

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

lub jeśli naprawdę chcesz zamienić element div, możesz zrobić:

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

Prostszy sposób to:

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

Możesz również użyć tego formularza do załadowania css.

Ta odpowiedź jest technicznie podobna lub równa temu, na co odpowiedział jcoffland. Właśnie dodałem zapytanie, aby wykryć, czy skrypt już istnieje, czy nie. Potrzebuję tego, ponieważ pracuję w witrynie intranetowej z kilkoma modułami, z których niektóre udostępniają skrypty lub przynoszą własne, ale te skrypty nie muszą być ładowane za każdym razem. Używam tego fragmentu od ponad roku w środowisku produkcyjnym, działa jak urok. Komentując sobie: Tak, wiem, bardziej poprawne byłoby pytanie, czy funkcja istnieje ... :-)

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

Jest jedno obejście, które brzmi bardziej jak włamanie i zgadzam się, że nie jest to najbardziej elegancki sposób, ale działa w 100%:

Powiedz, że Twoja odpowiedź AJAX jest podobna do

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

Zauważ, że celowo pominąłem tag zamykający. Następnie w skrypcie, który ładuje powyższe, wykonaj następujące czynności:

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

Tylko nie pytaj mnie dlaczego :-) To jedna z tych rzeczy, do których doszedłem w wyniku desperackich, prawie przypadkowych prób i niepowodzeń.

Nie mam pełnych sugestii, jak to działa, ale co ciekawe, NIE zadziała, jeśli dodasz tag zamykający w jednej linii.

W takich chwilach mam wrażenie, że udało mi się podzielić przez zero.

Przykład:

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

Powinno działać. Próbowałem tego; ten sam wynik. Ale kiedy użyłem tego:

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

To zadziałało dla mnie.

Edycja: zapomniałem #someelement(przy okazji mogę chcieć użyć z #someElementpowodu konwencji)

Najważniejsze jest tutaj + =, więc kod HTML jest dodawany, a nie zastępowany.

Zostaw komentarz, jeśli to nie zadziałało. Chciałbym ci pomóc!

Oto znacznie jaśniejszy sposób - nie ma potrzeby korzystania z jQuery - który dodaje skrypt jako ostatnie dziecko <body>:

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

Ale jeśli chcesz dodawać i ładować skrypty, użyj metody Rocket Hazmat .

Jeśli próbujesz uruchomić dynamicznie generowany JavaScript, byłoby nieco lepiej, gdybyś użył eval. Jednak JavaScript jest tak dynamicznym językiem, że naprawdę nie powinieneś tego potrzebować.

Jeśli skrypt jest statyczny, najlepszym getScriptrozwiązaniem jest sugestia Rocketa.