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

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

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

Но я получил строковые литералы на этом var. Затем я попытался кодировать строку как:

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

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

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

Ответы

Ответ 1

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

Пример:

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

Ответ 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

Ответ 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');
});

Ответ 4

Простейший способ:

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

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

Ответ 5

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

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

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

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

Ответ 7

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

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

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

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

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

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

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

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

Ответ 8

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

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

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

Ответ 9

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

Если script является статическим, то Rocket getScript -suggestion - это путь.