Як динамічно вставити тег <script> через jQuery після завантаження сторінки?

У мене виникають проблеми з налагодженням цієї роботи. Спершу я спробував встановити свої теги сценарію як рядки, а потім за допомогою jquery substituWith () додати їх до документа після завантаження сторінки:

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(btw, який я, можливо, хочу використовувати #someElementчерез умовні умови)

Найголовніше тут + = тому html додається і не замінюється.

Залиште коментар, якщо це не спрацювало. Я хотів би допомогти вам!

Ось набагато зрозуміліший спосіб - немає необхідності в jQuery - який додає сценарій як остання дочірка <body>:

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

Але якщо ви хочете додати та завантажити сценарії, використовуйте метод Rocket Hazmat .

Якщо ви намагаєтеся запустити якийсь динамічно генерований JavaScript, вам було б трохи краще, використовуючи eval. Однак JavaScript - це настільки динамічна мова, що у вас справді не повинно бути потреби в цьому.

Якщо сценарій є статичним, то getScriptподальша пропозиція Rocket - це шлях.