Làm cách nào để chèn động thẻ <script> qua jQuery sau khi tải trang?

Tôi đang gặp sự cố khi làm việc này. Đầu tiên tôi đã thử đặt các thẻ tập lệnh của mình dưới dạng chuỗi và sau đó sử dụng jquery ReplaceWith () để thêm chúng vào tài liệu sau khi tải trang:

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

Nhưng tôi gặp lỗi chuỗi ký tự trên var đó. Sau đó, tôi đã thử mã hóa chuỗi như:

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

nhưng gửi nó đến replaceWith()kết quả đầu ra chỉ chuỗi đó cho trình duyệt.

Ai đó có thể vui lòng cho tôi biết bạn sẽ thực hiện như thế nào khi thêm động một <script>thẻ vào trình duyệt sau khi tải trang, lý tưởng nhất là thông qua jQuery?

Bạn có thể đặt tập lệnh vào một tệp riêng biệt, sau đó sử dụng $.getScriptđể tải và chạy nó.

Thí dụ:

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

Hãy thử những cách sau:

<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

Đây là cách chính xác để làm điều đó với JQuery hiện đại (2014):

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

hoặc nếu bạn thực sự muốn thay thế một div, bạn có thể làm:

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

Một cách đơn giản hơn là:

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

Bạn cũng có thể sử dụng biểu mẫu này để tải css.

Câu trả lời này về mặt kỹ thuật tương tự hoặc bằng với những gì jcoffland đã trả lời. Tôi vừa thêm một truy vấn để phát hiện xem một tập lệnh đã có hay chưa. Tôi cần điều này vì tôi làm việc trong một trang web mạng nội bộ với một vài mô-đun, trong đó một số đang chia sẻ tập lệnh hoặc mang tập lệnh của riêng chúng, nhưng những tập lệnh này không cần phải tải lại mọi lúc. Tôi đang sử dụng đoạn mã này từ hơn một năm nay trong môi trường sản xuất, nó hoạt động giống như một charme. Tự nhận xét: Vâng, tôi biết, sẽ đúng hơn nếu hỏi nếu một hàm tồn tại ... :-)

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

Có một cách giải quyết nghe giống hack hơn và tôi đồng ý rằng đó không phải là cách thanh lịch nhất để làm điều đó, nhưng hoạt động 100%:

Giả sử phản hồi AJAX của bạn giống như

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

Lưu ý rằng tôi đã cố tình bỏ qua thẻ đóng. Sau đó, trong tập lệnh tải ở trên, hãy thực hiện như sau:

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

Chỉ cần đừng hỏi tôi tại sao :-) Đây là một trong những điều tôi đã đến do kết quả của các thử nghiệm gần như ngẫu nhiên tuyệt vọng và thất bại.

Tôi không có gợi ý đầy đủ về cách hoạt động của nó, nhưng thú vị là nó sẽ KHÔNG hoạt động nếu bạn nối thẻ đóng vào một dòng.

Những lúc như thế này, tôi cảm thấy mình đã chia thành công cho số 0.

Thí dụ:

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

Nó sẽ hoạt động. Tôi đã thử nó; cùng một kết quả. Nhưng khi tôi sử dụng cái này:

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

Điều này đã làm việc cho tôi.

Chỉnh sửa: Tôi quên #someelement(btw tôi có thể muốn sử dụng #someElementvì quy ước)

Điều quan trọng nhất ở đây là dấu + = để html được thêm vào và không bị thay thế.

Để lại bình luận nếu nó không hoạt động. Tôi muốn giúp bạn!

Đây là một cách rõ ràng hơn nhiều - không cần jQuery - thêm một tập lệnh làm con cuối cùng của <body>:

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

Nhưng nếu bạn muốn thêm và tải các tập lệnh, hãy sử dụng phương pháp của Rocket Hazmat .

Nếu bạn đang cố gắng chạy một số JavaScript được tạo động, bạn sẽ tốt hơn một chút bằng cách sử dụng eval. Tuy nhiên, JavaScript là một ngôn ngữ động đến nỗi bạn thực sự không cần phải sử dụng nó.

Nếu tập lệnh là tĩnh, thì getScript-suggestion của Rocket là cách để thực hiện.