스크립트 파일을 동적으로 로드하는 두 가지 방법_javascript 팁

페이지에 스크립트를 동적으로 로드하는 방법은 두 가지 정도가 있습니다

첫 번째는 ajax를 사용하여 스크립트 파일 코드를 백그라운드에서 포그라운드로 로드한 후 로드된 콘텐츠에 대해 eval()을 통해 코드를 실행하는 것입니다. . 두 번째는 스크립트 태그를 동적으로 생성하고 src 속성을 설정한 다음 스크립트 태그를 페이지 헤드에 삽입하여 js를 로드하는 것입니다. 이는 에 있지만 이 스크립트 태그는 js를 사용하여 동적으로 생성됩니다. 예를 들어, callbakc.js를 동적으로 로드하려면 다음과 같은 스크립트 태그가 필요합니다.

코드 복사 코드는 다음과 같습니다. 다음 코드는 js를 통해 이 태그를 생성하고 헤드에 추가하는 방법입니다. 코드 복사 코드는 다음과 같습니다. var head= document.getElementsByTagName('head')[0] var script= document.createElement ('스크립트'); script .type= 'text/javascript'; script.src= 'call.js' head.appendChild(script) >call.js가 로드되면 호출되는 메소드입니다. 그러나 header.appendChild(script) 바로 뒤에는 js를 호출할 수 없습니다. 브라우저는 이 js를 비동기적으로 로드하기 때문에 언제 로드가 완료되었는지 알 수 없습니다. 그러나 이벤트를 수신하여 helper.js가 로드되었는지 확인할 수 있습니다. (call.js에 콜백 메소드가 있다고 가정)

코드 복사 코드는 다음과 같습니다. var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script') script.type= 'text/javascript'; .onreadystatechange= function () { if (this.readyState == 'complete') callback() } script.onload= function(){ callback(); } script.src= 'helper.js'; head.appendChild(script);

onreadystatechange가 사용되기 때문에 2개의 이벤트 수신 기능을 설정했습니다. , 및 gecko 는 웹킷 브라우저와 Opera 모두 onload를 지원합니다. 실제로 this.readyState == 'complete'는 잘 작동하지 않습니다. 이론적으로 상태 변경은 다음과 같습니다. 0 초기화되지 않음 1 로드 2 로드됨 3 대화형 4 완료 그러나 일부 상태는 건너뜁니다. 경험에 따르면 IE7에서는 로드됨과 완료됨 중 하나만 얻을 수 있지만 둘 다 얻을 수는 없습니다. 그 이유는 상태 변경이 캐시 읽기에 영향을 미치는지 여부에 영향을 미치거나 다른 이유일 수 있기 때문일 수 있습니다. 판단 조건을 this.readyState == 'loaded' || this.readyState == 'complete'로 변경하는 것이 가장 좋습니다.

jQuery 구현을 참고하면, 최종 구현은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. var head= document.getElementsByTagName('head')[0] ; var script= document .createElement('script'); script.type= 'text/javascript' script.onload = script.onreadystatechange = function() { if (! this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) { help() // IE에서 메모리 누수 처리 = script.onreadystatechange = null; } }; script.src= 'helper.js'; head.appendChild(script)

put help() helper.js 끝에 호출을 작성하면 helper.js가 로드된 후 help()가 자동으로 호출될 수 있는지 확인할 수 있습니다. 물론 이것이 적합한지 확인할 수도 있어야 합니다. 귀하의 신청서. 또한 참고하세요:

1. 스크립트 태그의 src는 도메인 전체에 걸쳐 리소스에 액세스할 수 있으므로 이 방법을 사용하면 Ajax를 시뮬레이션하고 Ajax 도메인 간 액세스 문제를 해결할 수 있습니다. 2. ajax가 반환한 html 코드에 스크립트가 포함된 경우 innerHTML을 dom에 직접 삽입해도 html의 스크립트가 작동하지 않습니다. jQuery().html(html)의 원본 코드를 대충 살펴본 후 jQuery는 먼저 들어오는 매개변수를 구문 분석하고 스크립트 코드를 제거한 다음 동적으로 스크립트 태그를 생성합니다. dom에 스크립트가 포함되어 있으면 실행 가능합니다. 예:

코드 복사 코드는 다음과 같습니다. jQuery("#content" ).html( " alert('aa'); ")