[javascript] 페이지로드 후 jQuery를 통해 <script> 태그를 동적으로 삽입하는 방법은 무엇입니까?

Program / 글쓴이

이 작업을 수행하는 데 문제가 있습니다. 먼저 스크립트 태그를 문자열로 설정 한 다음 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를 통해 브라우저에 태그를 동적으로 추가하는 방법을 알려주세요 .

답변

스크립트를 별도의 파일에 넣은 다음을 사용 $.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가 답변 한 것과 기술적으로 유사하거나 동일합니다. 스크립트가 이미 있는지 여부를 감지하는 쿼리를 추가했습니다. 몇 개의 모듈이있는 인트라넷 웹 사이트에서 작업하기 때문에 이것이 필요합니다.이 중 일부는 스크립트를 공유하거나 자체적으로 가져 오지만 이러한 스크립트는 매번 다시로드 할 필요가 없습니다. 프로덕션 환경에서 1 년 이상이 스 니펫을 사용하고 있습니다. 나 자신에게 댓글 달기 : 예, 알겠습니다. 함수가 있는지 묻는 것이 더 정확할 것입니다 … 🙂

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

왜 그런지 묻지 마세요 🙂 이것은 필사적으로 거의 무작위적인 시련과 실패의 결과로 얻은 것들 중 하나입니다.

작동 방식에 대한 완전한 제안은 없지만 흥미롭게도 닫는 태그를 한 줄에 추가하면 작동하지 않습니다.

이런 때에 나는 성공적으로 0으로 나눈 것 같다.

답변

예:

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이 추가되고 대체되지 않습니다.

작동하지 않으면 댓글을 남겨주세요. 나는 당신을 돕고 싶습니다!