웹 페이지에 스크립트 태그를 동적으로 포함하고 싶지만 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를 동적으로 추가 할 수있는 다른 방법이 있습니까?
답변
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);