Bagaimana cara memasukkan tag <script> secara dinamis melalui jQuery setelah pemuatan halaman?

Saya mengalami masalah saat membuat ini berfungsi. Saya pertama kali mencoba mengatur tag skrip saya sebagai string dan kemudian menggunakan jquery replaceWith () untuk menambahkannya ke dokumen setelah pemuatan halaman:

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

Tapi saya mendapat kesalahan literal string pada var itu. Saya kemudian mencoba menyandikan string seperti:

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

tetapi mengirimkannya ke replaceWith()output hanya string itu ke browser.

Bisakah seseorang memberi tahu saya bagaimana Anda akan menambahkan <script>tag secara dinamis ke browser setelah pemuatan halaman, idealnya melalui jQuery?

Anda dapat meletakkan skrip ke dalam file terpisah, lalu gunakan $.getScriptuntuk memuat dan menjalankannya.

Contoh:

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

Coba yang berikut ini:

<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

Berikut cara yang benar untuk melakukannya dengan JQuery modern (2014):

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

atau jika Anda benar-benar ingin mengganti div, Anda dapat melakukan:

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

Cara yang lebih sederhana adalah:

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

Anda juga dapat menggunakan formulir ini untuk memuat css.

Jawaban ini secara teknis serupa atau sama dengan apa yang dijawab oleh jcoffland. Saya baru saja menambahkan kueri untuk mendeteksi apakah skrip sudah ada atau tidak. Saya memerlukan ini karena saya bekerja di situs web intranet dengan beberapa modul, di mana beberapa di antaranya berbagi skrip atau membawa sendiri, tetapi skrip ini tidak perlu dimuat lagi. Saya menggunakan potongan ini sejak lebih dari satu tahun di lingkungan produksi, itu berfungsi seperti pesona. Mengomentari diri sendiri: Ya saya tahu, akan lebih tepat untuk menanyakan apakah ada fungsi ... :-)

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

Ada satu solusi yang terdengar lebih seperti peretasan dan saya setuju ini bukan cara paling elegan untuk melakukannya, tetapi berhasil 100%:

Katakanlah tanggapan AJAX Anda seperti ini

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

Perhatikan bahwa saya sengaja melewatkan tag penutup. Kemudian pada skrip yang memuat di atas, lakukan hal berikut:

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

Jangan tanya saya mengapa :-) Ini adalah salah satu hal yang saya alami sebagai hasil dari percobaan yang hampir acak dan gagal.

Saya tidak memiliki saran lengkap tentang cara kerjanya, tetapi yang cukup menarik, ini TIDAK akan berfungsi jika Anda menambahkan tag penutup dalam satu baris.

Di saat-saat seperti ini, saya merasa telah berhasil membagi dengan nol.

Contoh:

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

Ini harus berhasil. Saya mencobanya; hasil yang sama. Tetapi ketika saya menggunakan ini:

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

Ini berhasil untuk saya.

Edit: Saya lupa file #someelement (btw saya mungkin ingin menggunakan#someElement karena konvensi)

Yang terpenting disini adalah + = agar html ditambahkan dan tidak diganti.

Tinggalkan komentar jika tidak berhasil. Saya ingin membantu Anda!

Berikut ini cara yang lebih jelas - tidak perlu jQuery - yang menambahkan skrip sebagai anak terakhir dari <body>:

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

Tetapi jika Anda ingin menambahkan dan memuat skrip, gunakan metode Rocket Hazmat .

Jika Anda mencoba menjalankan beberapa JavaScript yang dibuat secara dinamis, akan lebih baik jika Anda menggunakan eval. Namun, JavaScript adalah bahasa yang dinamis sehingga Anda seharusnya tidak membutuhkannya.

Jika skripnya statis, maka saran Rocket getScriptadalah cara yang tepat.