document.write를 포함 할 수있는 src로 스크립트 태그를 동적으로 추가

웹 페이지에 스크립트 태그를 동적으로 포함하고 싶지만 src를 제어 할 수 없으므로 src = "source.js"는 다음과 같습니다.

document.write('<script type="text/javascript">')
document.write('alert("hello world")')
document.write('</script>')
document.write('<p>goodbye world</p>')

이제는 보통

<script type="text/javascript" src="source.js"></script> 

머리에 잘 작동하지만 innerHTML과 같은 것을 사용하여 source.js를 동적으로 추가 할 수있는 다른 방법이 있습니까?

내가 시도한 것의 jsfiddle

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

다음 document.createElement()과 같은 기능을 사용할 수 있습니다 .

function addScript( src ) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  document.body.appendChild( s );
}

이 onload스크립트가 성공적으로로드되면 호출 할 수있는 기능은 :

function addScript( src,callback) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  s.onload=callback;
  document.body.appendChild( s );
}

여러 스크립트를로드하기 위해 작성한 멋진 작은 스크립트 :

function scriptLoader(scripts, callback) {

    var count = scripts.length;

    function urlCallback(url) {
        return function () {
            console.log(url + ' was loaded (' + --count + ' more scripts remaining).');
            if (count < 1) {
                callback();
            }
        };
    }

    function loadScript(url) {
        var s = document.createElement('script');
        s.setAttribute('src', url);
        s.onload = urlCallback(url);
        document.head.appendChild(s);
    }

    for (var script of scripts) {
        loadScript(script);
    }
};

용법:

scriptLoader(['a.js','b.js'], function() {
    // use code from a.js or b.js
});

다음 코드 스 니펫을 시도 할 수 있습니다.

function addScript(attribute, text, callback) {
    var s = document.createElement('script');
    for (var attr in attribute) {
        s.setAttribute(attr, attribute[attr] ? attribute[attr] : null)
    }
    s.innerHTML = text;
    s.onload = callback;
    document.body.appendChild(s);
}

addScript({
    src: 'https://www.google.com',
    type: 'text/javascript',
    async: null
}, '<div>innerHTML</div>', function(){});

이것은 나를 위해 일한 것입니다.

당신은 그것을 확인할 수 있습니다.

var script_tag = document.createElement('script');
script_tag.setAttribute('src','https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js');
document.head.appendChild(script_tag);
window.onload = function() {
    if (window.jQuery) {  
        // jQuery is loaded  
        alert("ADD SCRIPT TAG ON HEAD!");
    } else {
        // jQuery is not loaded
        alert("DOESN'T ADD SCRIPT TAG ON HEAD");
    }
}

스크립트가 비동기 적으로로드되면 document.write를 호출 할 수 없습니다. 호출은 무시되고 콘솔에 경고가 기록됩니다.

다음 코드를 사용하여 스크립트를 동적으로로드 할 수 있습니다.

var scriptElm = document.createElement('script');
scriptElm.src = 'source.js';
document.body.appendChild(scriptElm);

이 방법은 소스가 별도의 파일에 속하는 경우에만 잘 작동합니다.

그러나 소스 코드를 인라인 함수로 동적으로로드하고 클래스, 유형 등과 같은 스크립트 태그에 다른 속성을 추가하려는 경우 다음 스 니펫이 도움이됩니다.

var scriptElm = document.createElement('script');
scriptElm.setAttribute('class', 'class-name');
var inlineCode = document.createTextNode('alert("hello world")');
scriptElm.appendChild(inlineCode); 
target.appendChild(scriptElm);

글쎄, 동적 자바 스크립트를 포함시킬 수있는 여러 가지 방법이 있습니다.이 프로젝트를 많은 프로젝트에 사용합니다.

var script = document.createElement("script")
script.type = "text/javascript";
//Chrome,Firefox, Opera, Safari 3+
script.onload = function(){
console.log("Script is loaded");
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);

필요한만큼 많은 자바 스크립트 파일을로드하는 데 도움이되는 범용 함수 만들기를 호출 할 수 있습니다. 여기에 대한 전체 자습서가 있습니다.

올바른 방법으로 동적 자바 스크립트 삽입

이 작업을 수행하는 유일한 방법은 document.write페이지 하단에 요소를 추가하는 자체 기능 으로 바꾸는 것입니다. jQuery를 사용하면 매우 간단합니다.

document.write = function(htmlToWrite) {
  $(htmlToWrite).appendTo('body');
}

질문 예제와 같이 html로 document.write를 사용하는 경우 htmlToWrite세그먼트 를 버퍼링해야합니다 . 아마도 이런 식으로 뭔가 :

document.write = (function() {
  var buffer = "";
  var timer;
  return function(htmlPieceToWrite) {
    buffer += htmlPieceToWrite;
    clearTimeout(timer);
    timer = setTimeout(function() {
      $(buffer).appendTo('body');
      buffer = "";
    }, 0)
  }
})()

각 스크립트를 재귀 적으로 추가하여 시도했습니다.

참고 스크립트가 서로 종속 된 경우 위치가 동기화되어 있어야합니다.

초기 스크립트에서 사용할 수 있도록 주요 종속성이 배열의 마지막이어야합니다.

const scripts = ['https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js']
let count = 0

  
 const recursivelyAddScript = (script, cb) => {
  const el = document.createElement('script')
  el.src = script
  if(count < scripts.length) {
    count ++
    el.onload = recursivelyAddScript(scripts[count])
    document.body.appendChild(el)
  } else {
    console.log('All script loaded')
    return
  }
}
 
  recursivelyAddScript(scripts[count])

올바른 순서로 서로 의존하는 스크립트를로드합니다.

Satyam Pathak 응답을 기반으로 하지만 부하시 문제를 해결했습니다. 스크립트가 실제로로드되기 전에 트리거되었습니다.

const scripts = ['https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js']
let count = 0

  
 const recursivelyAddScript = (script, cb) => {
  const el = document.createElement('script')
  el.src = script
  if(count < scripts.length) {
    count ++
    el.onload = () => recursivelyAddScript(scripts[count])
    document.body.appendChild(el)
  } else {
    console.log('All script loaded')
    return
  }
}
 
  recursivelyAddScript(scripts[count])

다음은 Google 웹 로그 분석 및 Facebook Pixel에서 사용하는 코드와 같은 축소 된 스 니펫입니다.

!function(e,s,t){(t=e.createElement(s)).async=!0,t.src="https://example.com/foo.js",(e=e.getElementsByTagName(s)[0]).parentNode.insertBefore(t,e)}(document,"script");

교체 https://example.com/foo.js스크립트 경로.

하나의 라이너 (위의 답변과 본질적인 차이는 없음) :

document.body.appendChild(document.createElement('script')).src = 'source.js';