>웹 프론트엔드 >JS 튜토리얼 >javascript_javascript 기술로 js 파일을 동적으로 로드하는 다양한 솔루션 요약

javascript_javascript 기술로 js 파일을 동적으로 로드하는 다양한 솔루션 요약

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
2016-05-16 17:14:451257검색

비교방법은 모두 동적으로 추가됩니다

코드 복사 코드는 다음과 같습니다.

/*
js v1.0을 동적으로 로드: dum
사용법: src="webJsBase.js?load=a,b"
참고: 이 디렉터리에 js를 로드
*/
var webJsBase = {
require: function(libraryName) {
document.write('');
},
로드: function(defaultLoad) {
if((typeof Prototype=='undefine')||(typeof Element == 'undefine')||(typeof Element.Methods==' 정의되지 않음') )
throw ('프로토타입 lib 로딩 실패!');
if(typeof defaultLoad=='undefine')defaultLoad='';
var js = /webJsBase.js(?.* )?$ //;
var path = s.src.replace(js, '');
var include = s.src.match(/?.*load=([a-zA-Z0- 9_,]*)/ ;
});
}
};
webJsBase.load(); //이 매개변수는 기본적으로 로드할 js 파일을 지정할 수 있습니다



아래와 같이 document.write를 로딩 후 바로 사용하는 가장 간단한 방법입니다.


코드 복사


코드는 다음과 같습니다.<script> </script> document.write("");

스크립트에 ID를 추가한 후 기존 스크립트의 src 속성을 동적으로 변경합니다.


코드 복사


코드는 다음과 같습니다. <script></script>
s1.src="test.js"

여기서는 getElementsByTagName('HEAD')를 사용하여 스크립트 요소를 동적으로 생성합니다


코드 복사

코드는 다음과 같습니다. <script></script> var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");

oScript.type = "text/javascript";

oScript.src="test.js";

oHead.appendChild(oScript);

이것을 시도해보고 기능을 사용자 정의할 수도 있습니다.


코드 복사


코드는 다음과 같습니다.함수 포함(src) {HTMLCode = '';document.write(HTMLCode); }

메소드를 호출하면 PHP 포함 함수처럼 보입니다.



코드 복사

코드는 다음과 같습니다:include(baseDir "/Prototype.js");include(baseDir "/Map.js");include(baseDir "/MapEvent.js ");
include(baseDir "/model/MapModel.js");
include(baseDir "/model/MapType.js");
include(baseDir "/model/Tile.js");

还有朋友说可以使用ExtJs4 动态加载js这里我就不介绍了,上面的方法足够让你实现动态加载js了.

所以在采用这类方法动态加载Js 的同时,主界面的Js脚本是继续执行的,所以可能出现通过异步加载的Js代码得不到预期的效果的情况。

这时候可以考虑采用Ajax加载Js的方法。

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.