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

101

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

— 더그
소스

<script>문서에 태그를 추가하여 달성하려는 목표를 설명 할 수 있습니까 ?

— Pointy

@Rocket의 대답이 가장 좋지만 문자열에서 인라인 스크립트를 확실히 추가하려면 eval()함수에 전달하면됩니다 . 그러나 eval()거의 항상를 사용 하면 수행하려는 작업을 수행하는 더 나은 방법이 있음을 시사합니다.

— Nick

페이지 끝까지 제 3 자 광고로드를 연기하려고합니다. 이러한 광고는 2 개의 스크립트 태그를 통해 호출되므로 페이지로드 후 동적으로 게재되는 함수를 실행하고 싶었습니다.

— Doug

2

모든 타사 스크립트가 지연 가능하도록 설계된 것은 아닙니다. 스크립트가 사용 document.write하고 페이지 로딩 후 호출하면 페이지가 파괴됩니다.

— bobince

1

<iframe>요소 에서 이러한 태그를 가져 오지 않는 이유는 무엇 입니까? <iframe>준비가 될 때까지 URL 설정을 연기 할 수 있습니다 .

— Pointy

103

스크립트를 별도의 파일에 넣은 다음을 사용 $.getScript하여로드하고 실행할 수 있습니다.

예:

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

— 로켓 위험물
소스

2

고마워요,하지만 DOM에 붙일까요? 나는 중요한 정보를 제외하고 DOM에 삽입하고 평가할 스크립트 태그가 필요하다는 것을 알고 있으며, 이때 특정 <div> 사이트에 표시 할 타사 광고 코드를 반환합니다.

— Doug

1

$.getScriptAJAX를 통해 .js 파일을로드하고 실행합니다. 페이지의 div에 액세스하기 위해 스크립트가 DOM에있을 필요는 없습니다.

— Rocket Hazmat

6

그러나 $.getScript()스크립트를 사용하려면 동일한 도메인에 있거나 원격 도메인과 브라우저가 모두 CORS.

— hippietrail

14

@hippietrail 사실이 아닙니다. CORS 또는 동일한 도메인이 필요하지 않은 일반 ol '스크립트 태그 만 삽입합니다. 예를 들어 Google Analytics를로드하기위한 코드를 단축하기 위해이 기능을 사용하는데 제대로로드됩니다. 실제로 실행되는 실제 jquery 코드는 실제로 GA 스 니펫과 매우 유사합니다.

— Chris Moschini 2013 년

39

@hippietrail의 답변은 4 개의 찬성 투표로 가장 많은 관심을 끌 것이기 때문에 그가 틀렸다는 점을 분명히해야합니다. jQuery 문서는 $.ajax"스크립트 및 JSONP 요청에는 동일한 출처 정책 제한이 적용되지 않습니다."라는 메모 에서 강조 표시 됩니다. 소스 . 즉, $.getScript자신의 .js 파일뿐만 아니라 다른 도메인에서 .js 파일을 가져올 수 있습니다 .

— EleventyOne 2013-08-31

64

다음을 시도하십시오.

<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

— Bassem
소스

4

append스크립트를 추가하는 데 사용하는 +1입니다 . Append를 사용하면 인라인 스크립트도 즉시 평가됩니다 (필요한 것만). 감사합니다

— Gone Coding

1

이 접근 방식으로 IE8 / 9에서 많은 문제가 발생합니다. 즉 스택 오버플로 오류입니다. 이 작업을 전반적으로 수행하기 위해 아래 $ .getScript () 메서드를 사용했습니다.

— zmonteca 2013

1

예 @jcoffland이 : 2010 년 10 월 작성되었습니다

— 바셈

이 코드가 포함 된 페이지가 AJAX를 사용하여로드되는 경우 브라우저는 "최종 사용자의 경험에 해로운 영향을 미치기 때문에 기본 스레드의 동기 XMLHttpRequest가 더 이상 사용되지 않습니다"경고를 표시합니다.

— Rajshekar Reddy

@Reddy 좋은 의견. 이 방법은 2010 년 10 월에 게시되었으며 지금까지는이 방법이 더 이상 유효하거나 권장되는 방법이 아니라고 확신합니다. 사용자는 자신의 재량에 따라 진행해야합니다.

— Bassem

34

최신 (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');
});

— JCoffland
소스

3

또는 대신는 .text ( '여기에 몇 가지 스크립트')은 ( 'path_to_your_js_file'을 'SRC')을 .attr 쓸 수

— Serhii Maksymchuk

11

더 간단한 방법은 다음과 같습니다.

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

이 양식을 사용하여 CSS를로드 할 수도 있습니다.

— 이만
소스

6

</script>구문 분석 문제를 일으킬 수 있기 때문에 소스에 문자열 을 넣지 않는 것이

— 좋습니다

2

마지막 탈출 /나를 위해 트릭 않았다$('head').append('<script src="your.js"><\/script>');

— jerik

5

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

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

— ddlab
소스

btw. 스타일 시트도 마찬가지입니다. if (! $ ( 'head> link [href = "widgets / css / widgets.css"]'). length) {$ ( 'head'). append ($ ( '<link / > '). attr ('rel ','stylesheet '). attr ('href ','widgets / css / widgets.css '));}

— ddlab

2

해킹처럼 들리는 한 가지 해결 방법이 있으며 가장 우아한 방법은 아니지만 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으로 나눈 것 같다.

— 금연 건강 증진 협회
소스

3

브라우저가 문자열 리터럴 대신 스크립트의 닫는 태그로 인식하기 때문에 닫는 스크립트 태그가 한 조각이면 작동하지 않습니다.

— Gone Coding

1

<\/script>하지만 유효합니다

— SP

@TrueBlueAussie의 요점은 "이유를 묻지 마십시오.하지만 흥미롭게도 닫는 태그를 한 줄에 추가하면 작동하지 않습니다."라는 의견에 대한 응답이라고 생각합니다. 그는 왜 "모르겠어요"보다 더 나은 대답을 원하는 독자들이 더 쉽게 찾을 수 있도록 이유를 설명했습니다. 참조 : javascript.crockford.com/script.html

— iX3 2015

1

해당 링크에 따르면 @Sathvik이 정확합니다. Ash의 댓글은 삭제 된 댓글에 대한 답변 인 것 같습니다.

— Arlen Beiler 2016-01-26

2

예:

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

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

— 산티노 보 노라
소스

2

다음은 스크립트를의 마지막 자식으로 추가하는 훨씬 더 명확한 방법입니다. jQuery가 필요 없습니다 <body>.

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

그러나 스크립트 를 추가 하고 로드 하려면 Rocket Hazmat의 방법을 사용하십시오 .

— Gagik Sargsyan
소스

-4

동적으로 생성 된 자바 스크립트를 실행하려는 경우 eval. 그러나 JavaScript는 동적 언어이므로 실제로 필요하지 않아야합니다.

스크립트가 정적 인 경우 Rocket의 getScript제안이 갈 길입니다.

— Magnar
소스