원격 src로 펼쳐 태그를 삽입하고 실행될 때까지 기다립니다.
<script src="https://remote.com/"></script>내 페이지에 요소를 삽입하고 실행될 때까지 기다린 다음 정의 된 함수를 사용해야 할 필요가 있습니까?
참고 : 제 경우에는 드물게 일부 신용 카드 처리를 수행 할 때 항상 포함하고 싶지 않습니다. 사용자가 신용 카드 옵션 변경 대화 상자를 열 때이를 신속하게 포함시킨 다음 새 신용 카드 옵션을 보내려고합니다.
추가 세부 정보 편집 : 원격 펼쳐에 대한 액세스 권한이 없습니다.
Google Analytics 또는 Facebook 의 방법을 사용할 수 있습니다 .
(function(d, script) {
script = d.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.onload = function(){
// remote script has loaded
};
script.src = 'http://www.google-analytics.com/ga.js';
d.getElementsByTagName('head')[0].appendChild(script);
}(document));
최신 정보 :
다음은 새로운 Facebook 방법입니다. 대신 기존 펼쳐 태그에 의존합니다 <head>.
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)){ return; }
js = d.createElement(s); js.id = id;
js.onload = function(){
// remote script has loaded
};
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
- 교체
facebook-jssdk한 번 이상 추가하지 않도록 방지하기 위해 한 펼쳐진 식별자. - 펼쳐지는 URL을 자신의 URL로 바꿉니다.
이벤트 리스너와 ES2015 구조를 사용하는 동일한 방법 :
function injectScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.async = true;
script.src = src;
script.addEventListener('load', resolve);
script.addEventListener('error', () => reject('Error loading script.'));
script.addEventListener('abort', () => reject('Script loading aborted.'));
document.head.appendChild(script);
});
}
injectScript('http://example.com/script.js')
.then(() => {
console.log('Script loaded!');
}).catch(error => {
console.log(error);
});
이 펼쳐 목록을 동 기적으로 동적으로로드하고 실행하는 한 가지 방법입니다. 각 펼쳐 태그를 DOM에 삽입하고 속성을 명시 적으로 거짓으로 설정해야합니다.
script.async = false;
DOM에 삽입 된 펼쳐지는 기본적으로 단어로 해결 실행이 문제를 해결하기 위해 비동기 속성을 수동으로 false로 설정해야합니다.
예
<script>
(function() {
var scriptNames = [
"https://code.jquery.com/jquery.min.js",
"example.js"
];
for (var i = 0; i < scriptNames.length; i++) {
var script = document.createElement('script');
script.src = scriptNames[i];
script.async = false; // This is required for synchronous execution
document.head.appendChild(script);
}
// jquery.min.js and example.js will be run in order and synchronously
})();
</script>
<!-- Gotcha: these two script tags may still be run before `jquery.min.js`
and `example.js` -->
<script src="example2.js"></script>
<script>/* ... */<script>
참고 문헌
- Google의 Jake Archibald 가 공연 전개의 어두운 물 속으로 Deep dive 라는 훌륭한 기사가 있습니다.
- 태그 의 WHATWG 사양 은 태그가로드되는 방법에 대한 훌륭하고 철저한 설명입니다.
다음과 같이 트릭을 수행해야합니다.
(function() {
// Create a new script node
var script = document.createElement("script");
script.type = "text/javascript";
script.onload = function() {
// Cleanup onload handler
script.onload = null;
// do stuff with the loaded script!
}
// Add the script to the DOM
(document.getElementsByTagName( "head" )[ 0 ]).appendChild( script );
// Set the `src` to begin transport
script.src = "https://remote.com/";
})();
도움이 되길 바랍니다! 건배.
동적 import()
이제 동적 가져 오기를 사용하여 다음과 같이 모듈을로드하고 모듈이 실행될 때까지 기다릴 수 있습니다.
import("http://example.com/module.js").then(function(module) {
alert("module ready");
});
모듈이 이미로드되고 실행 된 경우로드되고 다시 실행되지 않지만에서 반환 된 promise import는 여전히 해결됩니다.
파일은 스크립트가 아닌 모듈로로드됩니다. 모듈은 엄격 모드에서 실행되며 모듈 범위에서로드됩니다. 즉, 일반적으로로드 된 스크립트에서와 같이 변수가 자동으로 전역 화되지 않습니다. export모듈 에서 키워드를 사용하여 다른 모듈 또는 스크립트와 변수를 공유합니다.
참조 :
로더 만들기
로더에서 순서대로 스크립트를 삽입 할 수 있습니다 .
동적으로로드 된 스크립트의 실행은 일반적으로 정적으로로드 된 스크립트 (예 :) 이후 <script src="My_script.js"></script>에 발생합니다 (DOM의 삽입 순서는 그 반대를 보장하지 않음).
예 : loader.js :
function appendScript(url){
let script = document.createElement("script");
script.src = url;
script.async = false //IMPORTANT
/*Node Insertion Point*/.appendChild(script);
}
appendScript("my_script1.js");
appendScript("my_script2.js");
my_script1.js효과적으로하기 전에 실행됩니다 my_script2.js(의 종속성을 경우에 유용합니다, my_script2.js에 my_script1.js)
script.async = false동적으로로드 된 스크립트는 async = true기본적 으로로드 async순서를 보장하지 않기 때문에 중요합니다 .
'ProgramingTip' 카테고리의 다른 글
| PHP 함수에서 HTML을 반환하는 방법이 있습니까? (0) | 2020.12.06 |
|---|---|
| .NET 버전 4.5가 현재 코드를 실행하고 있음을 런타임에 감지합니까? (0) | 2020.12.06 |
| AngularJs : 모델에 따라 체크 된 라디오 버튼을 설정하는 방법 (0) | 2020.12.06 |
| webstorm에 console.log 또는 console.info에 대한 바로 가기가 있습니까? (0) | 2020.12.06 |
| 클래스의 유형이 C ++의 특정 하위 클래스인지 어떻게 확인합니까? (0) | 2020.12.06 |