이 기사는 주로 JavaScript 파일을 동적으로로드하는 두 가지 방법을 소개합니다. 관심있는 친구들이 그것을 언급 할 수 있습니다.
첫 번째는 ajax 메소드를 사용하여 스크립트 파일 코드를 배경에서 전경으로로드 한 다음 Eval ()을 통해로드 된 컨텐츠에 대한 코드를 구현하는 것입니다. 두 번째 유형은 스크립트 태그를 만들고, SRC 속성을 구성하고, 스크립트 태그를 페이지 헤드에 삽입하여 <Script SRC = "..."> </script>를 작성하는 것과 동일하지만이 스크립트 태그는 JS SRC를 사용하여 생성하는 것입니다.
예를 들어 CallBakc.js를 동적으로로드하려면 스크립트 태그가 필요합니다.
코드는 다음과 같습니다. 다음과 같이 코드를 복사하십시오.
다음 코드는 JS를 통해이 태그를 작성하는 방법입니다 (헤드에 추가).
코드는 다음과 같습니다.
var head = document.getElementsByTagName ( 'head') [0]; var script = document.createElement ( 'script'); script.type = 'text/javaScript'; script.src = 'call.js'; Head.appendChild (스크립트);
Call.js가로드되면 메소드를 호출해야합니다. 그러나 Header.appendChild (스크립트) 후에 즉시 JS를 호출 할 수 없습니다. 브라우저 가이 JS를 비동기로로드하기 때문에 언제로드 될지 알 수 없습니다. 그러나 Helper.js가 이벤트 듣기를 통해로드 중인지 판단 할 수 있습니다. (Call.js에 콜백 메소드가 있다고 가정) 코드는 다음과 같습니다.
var head = document.getElementsByTagName ( 'head') [0]; var script = document.createElement ( 'script'); script.type = 'text/javaScript'; script.onreadyStateChange = function () {if (this.readyState == 'complete') 콜백 (); } script.onload = function () {Callback (); } script.src = 'helper.js'; Head.appendChild (스크립트);OnreadyStateChange가 IE에서 사용되기 때문에 2 개의 이벤트 청취 기능을 설정하고 OnLoad는 Gecko, WebKit 브라우저 및 운영자가 지원합니다. 실제로, readystate == '완료'는 잘 작동하지 않습니다. 이론적으로, 상태 변경은 다음과 같습니다.
1. 미지화
2.로드
3.로드
4. 간섭
5.complete
그러나 일부 주는 건너 뛸 것입니다. IE7의 경험에 따르면,로드 및 완료 중 하나만 얻을 수 있으며 둘 다 나타날 수 없습니다. 그 이유는 캐시에서의 독서가 상태의 변화에 영향을 미치는지 또는 다른 이유에 영향을 미치는지 결정하기 때문일 수 있습니다. 판단 조건을 이것으로 변경하는 것이 가장 좋습니다. this.readystate == '완료'
jQuery의 구현을 언급하면 마침내 다음과 같이 구현했습니다. 코드는 다음과 같습니다.
var head = document.getElementsByTagName ( 'head') [0]; var script = document.createElement ( 'script'); script.type = 'text/javaScript'; script.onload = script.onreadyStateChange = function () {if (! this.readystate || readystate === "로드 된"|| readyState === "완료") {help (); // IE Script.onLoad = Script.OnreadyStateChange = NULL에서 메모리 누출을 처리합니다. }}; script.src = 'helper.js'; Head.appendChild (스크립트);Helper.js의 끝에서 Help ()을 호출 할 수있는 또 다른 간단한 상황이 있으므로 Helper.js가로드 된 후 HELP ()를 자동으로 호출 할 수 있는지 확인할 수 있습니다. 물론 결국 이것은 응용 프로그램에 적합하지 않습니다.
또한 참고 :
1. 스크립트 태그 SRC는 도메인에서 리소스에 액세스 할 수 있으므로이 방법은 AJAX를 시뮬레이션하고 AJAX 크로스 도메인 액세스 문제를 해결할 수 있습니다.
2. ajax로 반환 된 HTML 코드에 스크립트가 포함되어 있으면 HTML에서 스크립트를 InnerHTML을 사용하여 DOM에 직접 삽입하면 HTML 작업에서 스크립트를 만들 수 없습니다. jQuery (). html (html)의 원래 코드를 대략적으로 살펴 보았습니다. JQuery는 먼저 전달 된 매개 변수를 구문 분석하고 스크립트 코드를 제거하고 스크립트 태그를 동적으로 만듭니다. jQuery가 사용하는 HTML 방법은 스크립트가 포함 된 경우 DOM HTML에 추가됩니다. 실행할 수 있습니다. 좋다:
코드 사본은 다음과 같습니다.
위는 JavaScript 파일을 동적으로로드하는 방법입니다. 모든 사람의 학습에 도움이되기를 바랍니다.