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

Question

У меня проблемы с тем, чтобы заставить это работать.Сначала я попытался установить теги скрипта в виде строк, а затем с помощью 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?

Answer 1

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

Пример:

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

Answer 2

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

<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

Answer 3

Вот правильный способ сделать это с современным (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');
});

Answer 4

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

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

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

Answer 5

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

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

Answer 6

Пример:

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 добавляется, а не заменяется.

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

Answer 7

Есть один обходной путь, который больше напоминает хак, и я согласен, что это не самый элегантный способ сделать это, но работает на 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);
    }
});

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

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

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

Answer 8

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

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

Но если вы хотите добавить и загрузить сценарии, используйте метод Ракеты Хазмата .

Answer 9

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

Если сценарий статичен, то getScript -предложение Ракеты - путь.