js 및 css 파일에 대한 js 코드를 비동기식으로 동적으로 로드_javascript 기술

jquery를 사용하여 CSS 및 js 파일을 동적으로 로드하는 방법은 매우 간단합니다.

예

방법 1:

코드는 다음과 같습니다

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

$ .getscript("test.js");

방법 2:

코드는 다음과 같습니다

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

함수 loadjs(파일){

var head = $('head').remove('#loadscript')

$("" "").attr({src:file,type:'text/javascript',id:'load'}).appendto (머리)

}

방법 3:

코드는 다음과 같습니다

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

$ ("" "").attr({src:file,type:'text/javascript',id:'load'}).appendto($(' head').remove( '#loadscript'));

아래 첨부된 내용은 js 및 css 파일을 동적으로 로드하는 몇 가지 방법입니다.

다음 코드는 news.qq.com 페이지의 코드에서 발췌한 것입니다. 프로그램은 괜찮은 것 같고 주로 js 파일을 동적으로 로드하는 데 사용됩니다. 웹페이지 하단의 태그로 이동하여 DOM을 통해 구현합니다.

코드는 다음과 같습니다

코드를 복사하세요 코드는 다음과 같습니다

<script><br> var SCRIPT_TIMEOUT = 20000;<br>var QVPL_PATH = "/QVPL1.0.0.js"; <p>함수 loadHelper(jsurl) {<br>var oScriptEl, oTimeoutHDL, oHead;<br>oScriptEl = document.createElement("script");<br>oScriptEl.type = "text/javascript";<br>oScriptEl .언어 = "javascript";<br>oScriptEl.src = jsurl;<br>oScriptEl.onreadystatechange = doCallback;</p> <p>oScriptEl.onload = function()<br>{<br>this.readyState = "complete";<br>doCallback();<br>if(typeof(lianbo) == "object"){<br>lianbo.init(window.QVPL);<br>}<br>};</p> <p>oTimeoutHDL = window.setTimeout(doError,SCRIPT_TIMEOUT);<br>document.getElementsByTagName("head")[0].appendChild(oScriptEl);</p> <p>함수 doCallback()<br>{<br>if (oScriptEl.readyState == "완료" || oScriptEl.readyState == "로드됨")<br>{<br>oScriptEl.onload = oScriptEl.onreadystatechange = new Function();<br>window.clearTimeout(oTimeoutHDL);<br>}<br>};</p> <p>함수 doError()<br>{<br>oScriptEl.parentNode.removeChild(oScriptEl);<br>};<br>}</p> <p>loadHelper(QVPL_PATH);<br></script>