이 예제는 JS를 동적으로로드하는 방법을 요약합니다. 참조를 위해 공유하십시오. 세부 사항은 다음과 같습니다.
방법 1 : Direct Document.Write (비동기)
다음과 같이 코드를 복사하십시오. <script language = "javaScript">
documb
</스크립트>
이 방법은 비동기로드이므로 Document.write는 인터페이스를 다시 작성하며, 이는 실용적이지 않습니다.
방법 2 : 기존 스크립트의 SRC 속성을 동적으로 변경 (비동기)
다음과 같이 코드를 복사하십시오. <script src = ''id = "xx"> </script>
<script language = "javaScript">
xx.src = "test.js"
</스크립트>
이 방법은 인터페이스 요소를 변경하지 않고 인터페이스 요소를 다시 작성하지 않지만 비동기식으로로드됩니다.
방법 3 : 스크립트 요소를 동적으로 생성 (비동기)
다음과 같이 코드를 복사하십시오. <cript>
var body = document.getElementsByTagName ( 'body'). [0];
var script = document.createElement ( "스크립트");
script.type = "text/javaScript";
script.src = "xx.js";
Body.appendChild (Oscript);
</스크립트>
두 번째 방법과 비교 하여이 방법의 장점은 처음에 인터페이스에 스크립트 태그를 작성할 필요가 없다는 것입니다. 단점은 비동기 적재입니다
방법 4 : xmlhttprequest/activexobject loading (비동기)
다음과 같이 코드를 복사하십시오 :/**
* JS 스크립트의 비동기로드
* @param id 설정이 필요한 <cript> 태그의 ID
* @Param URL JS 파일에 대한 상대 또는 절대 경로
*/
loadjs : function (id, url) {
var xmlhttp = null;
if (window.activexObject) {// IE
노력하다 {
// ie6 이상 버전에서 사용할 수 있습니다
xmlhttp = new ActiveXobject ( "msxml2.xmlhttp");
} catch (e) {
//ie5.5 이상 버전을 사용할 수 있습니다
xmlhttp = new ActiveXobject ( "microsoft.xmlhttp");
}
} else if (window.xmlhttprequest) {
// Firefox, Opera 8.0+, Safari, Chrome
xmlhttp = new xmlhttprequest ();
}
// 동기로드를 사용합니다
xmlhttp.open ( "get", url, false);
// 동기화 요청 보내기
// 브라우저가 Chrome 또는 Opera 인 경우 실행되기 전에 게시해야합니다. 그렇지 않으면 오류 가보고됩니다.
xmlhttp.send (null);
xmlhttp.onreadyStateChange = function () {
// 4는 데이터가 전송되었음을 의미합니다
if (xmlhttp.readystate == 4) {
// 0은 액세스 된 지역 영역이며 200 ~ 300은 서버에 대한 액세스가 성공했음을 의미합니다.
// 304는 액세스가 수정없이 캐시임을 의미합니다
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhttp.status == 0 || xmlhttp.status == 304) {
var mybody = document.getElementsByTagName ( "body") [0];
var myscript = document.createElement ( "스크립트");
myscript.language = "JavaScript";
myscript.type = "text/javaScript";
myscript.id = id;
노력하다{
// IE8 및 다음은이 메소드를 지원하지 않으며 텍스트 속성을 통해 설정해야합니다.
myscript.appendChild (document.createTextNode (xmlhttp.responsetext));
} catch (ex) {
myscript.text = xmlhttp.responsetext;
}
mybody.appendchild (myscript);
}
}
}
// 비동기로드를 사용했습니다
xmlhttp.open ( "get", url, true);
xmlhttp.send (null);
}
열린 상태에서 false로 설정한다는 것은 동기 로딩을 의미합니다. 동기로드는 oneadyStateChange 이벤트를 설정할 필요가 없습니다
이 네 가지 방법은 비동기 적으로 실행됩니다. 즉,이 스크립트를로드하는 동안 메인 페이지의 스크립트가 계속 실행됩니다.
방법 5 : xmlhttprequest/activexobject loading (동기)
다음과 같이 코드를 복사하십시오 :/**
* JS 스크립트의 동기로드
* @param id 설정이 필요한 <cript> 태그의 ID
* @Param URL JS 파일에 대한 상대 또는 절대 경로
* @return {boolean}은 성공적으로로드되는지 여부를 반환합니다. 진정한 성공을 의미합니다. 거짓 수단 실패
*/
loadjs : function (id, url) {
var xmlhttp = null;
if (window.activexObject) {// IE
노력하다 {
// ie6 이상 버전에서 사용할 수 있습니다
xmlhttp = new ActiveXobject ( "msxml2.xmlhttp");
} catch (e) {
//ie5.5 이상 버전을 사용할 수 있습니다
xmlhttp = new ActiveXobject ( "microsoft.xmlhttp");
}
} else if (window.xmlhttprequest) {
// Firefox, Opera 8.0+, Safari, Chrome
xmlhttp = new xmlhttprequest ();
}
// 동기로드를 사용합니다
xmlhttp.open ( "get", url, false);
// 동기화 요청을 보냅니다. 브라우저가 크롬 또는 오페라 인 경우 실행되기 전에 게시해야합니다. 그렇지 않으면 오류 가보고됩니다.
xmlhttp.send (null);
// 4는 데이터가 전송되었음을 의미합니다
if (xmlhttp.readystate == 4) {
// 0은 접근 된 지역 영역입니다. 200 ~ 300은 서버에 대한 액세스가 성공했으며 304는 액세스 된 캐시가 만들어지지 않았 음을 의미합니다.
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhttp.status == 0 || xmlhttp.status == 304) {
var mybody = document.getElementsByTagName ( "body") [0];
var myscript = document.createElement ( "스크립트");
myscript.language = "JavaScript";
myscript.type = "text/javaScript";
myscript.id = id;
노력하다{
// IE8 및 다음은이 메소드를 지원하지 않으며 텍스트 속성을 통해 설정해야합니다.
myscript.appendChild (document.createTextNode (xmlhttp.responsetext));
} catch (ex) {
myscript.text = xmlhttp.responsetext;
}
mybody.appendchild (myscript);
진실을 반환하십시오.
}또 다른{
거짓을 반환합니다.
}
}또 다른{
거짓을 반환합니다.
}
}
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.