Как динамически вставить тег <script> через jQuery после загрузки страницы?

У меня проблемы с этим. Сначала я попытался установить теги сценария как строки, а затем с помощью jquery replaceWith () добавить их в документ после загрузки страницы:

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

Но у меня есть ошибки строкового литерала в этой переменной. Затем я попытался кодировать строку, например:

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

но отправив это для replaceWith()вывода только этой строки в браузер.

Может кто-нибудь, дайте мне знать, как вы будете динамически добавлять <script>тег в браузер после загрузки страницы, в идеале через jQuery?

Вы можете поместить сценарий в отдельный файл, а затем использовать $.getScriptдля его загрузки и запуска.

Пример:

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

Попробуйте следующее:

<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

Вот правильный способ сделать это с помощью современного (2014) JQuery:

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

или если вы действительно хотите заменить div, вы можете сделать:

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

Более простой способ:

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

Вы также можете использовать эту форму для загрузки css.

Этот ответ технически аналогичен тому, что ответил jcoffland, или равен ему. Я просто добавил запрос, чтобы определить, присутствует ли сценарий уже или нет. Мне это нужно, потому что я работаю на веб-сайте интрасети с парой модулей, некоторые из которых совместно используют сценарии или приносят свои собственные, но эти сценарии не нужно загружать каждый раз снова. Я использую этот фрагмент уже более года в производственной среде, он отлично работает. Комментируя про себя: Да, я знаю, правильнее было бы спросить, существует ли функция ... :-)

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

Есть одно обходное решение, которое больше похоже на взлом, и я согласен, что это не самый элегантный способ сделать это, но работает на 100%:

Скажите, что ваш ответ AJAX похож на

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

Обратите внимание, что я специально пропустил закрывающий тег. Затем в скрипте, загружающем вышеуказанное, сделайте следующее:

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

Только не спрашивайте меня, почему :-) Это одна из тех вещей, к которым я пришел в результате отчаянных почти случайных испытаний и неудач.

У меня нет полных предложений о том, как это работает, но, что интересно, это НЕ будет работать, если вы добавите закрывающий тег в одну строку.

В такие моменты я чувствую, что успешно разделил на ноль.

Пример:

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

Он должен работать. Я попробовал; тот же результат. Но когда я использовал это:

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

Это сработало для меня.

Изменить: я забыл #someelement(кстати, я мог бы использовать #someElementиз-за соглашений)

Самым важным здесь является + =, поэтому html добавляется, а не заменяется.

Оставьте комментарий, если не сработало. Я хочу вам помочь!

Вот более понятный способ - без jQuery - который добавляет скрипт в качестве последнего дочернего элемента <body>:

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

Но если вы хотите добавлять и загружать скрипты, используйте метод Rocket Hazmat .

Если вы пытаетесь запустить динамически сгенерированный JavaScript, вам будет немного лучше, используя eval. Однако JavaScript - настолько динамичный язык, что в нем действительно не должно быть необходимости.

Если скрипт статический, то getScript-предложение Rocket - правильный выбор.