ajax를 사용하여 웹사이트를 개발할 때는 많은 JS 코드를 사용해야 하며, 처음 로드되는 페이지에서 모든 코드가 사용되는 것은 아닙니다.
그래서 많은 JS 코드가 동적으로 로드됩니다. 아래에 소개된 방법은 첫 번째 방법은 적합하지 않습니다. 방법 2, 3, 4는 기본적으로 JS를 동적으로 로드하는 방법입니다.
1.document.write
<scrīpt language="javascrīpt"> document.write("<scrīpt src='test.js'><//scrīpt>"); </scrīpt>
<scrīpt src='' id="s1"></scrīpt> <scrīpt language="javascrīpt"> s1.src="test.js" </scrīpt>
<scrīpt> var oHead = document. getElementsByTagName ('HEAD').item(0); var oscrīpt= document.createElement("scrīpt"); oscrīpt.type = "text/javascrīpt"; oscrīpt.src="test.js"; oHead.appendChild( oscrīpt); </scrīpt>
var str = "中国"; alert( "这是a.js中的变量:" + str );
<scrīpt language="Javascrīpt"> function LoadJS( id, fileUrl ) { var scrīptTag = document.getElementById( id ); var oHead = document.getElementsByTagName('HEAD').item(0); var oscrīpt= document.createElement("scrīpt"); if ( scrīptTag ) oHead.removeChild( scrīptTag ); oscrīpt.id = id; oscrīpt.type = "text/javascrīpt"; oscrīpt.src=fileUrl ; oHead.appendChild( oscrīpt); } LoadJS( "a.js" ); alert( "主页面动态加载a.js并取其中的变量:" + str ); </scrīpt>
그러나 메인 페이지에 오류가 발생하고 대화 상자가 나타나지 않습니다. 그 이유는 'str'이 정의되지 않았기 때문입니다. 왜 그렇습니까? 메인 페이지가 str
을 가져올 때 a.js가 완전히 로드되지 않았기 때문입니다. 스크립트를 동기적으로 실행해야 하는 경우 아래 네 번째 방법을 사용할 수 있습니다.
object
를 만듭니다.참고: 오류를 방지하려면 a.js를 UTF8 인코딩으로 저장해야 합니다. 서버와 XML은 UTF8 인코딩을 사용하여 데이터를 전송하기 때문입니다. 메인 페이지 코드:
<scrīpt language="Javascrīpt"> function GetHttpRequest() { if ( window.XMLHttpRequest ) // Gecko return new XMLHttpRequest() ; else if ( window.ActiveX Object ) // IE return new ActiveXObject("MsXml2.XmlHttp") ; } function AjaxPage(sId, url){ var oXmlHttp = GetHttpRequest() ; oXmlHttp.OnReadyStateChange = function() { if ( oXmlHttp.readyState == 4 ) { if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ) { Include JS( sId, url, oXmlHttp.responseText ); } else { alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ; } } } oXmlHttp.open('GET', url, true); oXmlHttp.send(null); } function IncludeJS(sId, fileUrl, source) { if ( ( source != null ) && ( !document.getElementById( sId ) ) ){ var oHead = document.getElementsByTagName('HEAD').item(0); var oscrīpt = document.createElement( "scrīpt" ); oscrīpt.language = "javascrīpt"; oscrīpt.type = "text/javascrīpt"; oscrīpt.id = sId; oscrīpt.defer = true; oscrīpt.text = source; oHead.appendChild( oscrīpt ); } } AjaxPage( "scrA", "b.js" ); alert( "主页面动态加载JS脚本。"); alert( "主页面动态加载a.js并取其中的变量:" + str ); </scrīpt>
//所有的JS文件 var jsM = { page : false , dhtmlXTree : false , photo_tree : false }; function getJSM(f) { var reg = ///(/w+)/./; jF = f.match(reg); return jF[jF.length-1]; } function loadJS(js) { id = getJSM(js); var scrīptId = document.getElementById(id); var head = document.getElementsByTagName('head').item(0); if(scrīptId) { //head.removeChild(id); } else { scrīpt = document.createElement('scrīpt'); scrīpt.src = js; scrīpt.type = 'text/javascrīpt'; scrīpt.id = id; head.appendChild(scrīpt); } } //JS时候,判断jsM中,代表其模块的标识是否为true,如果为false,则尚未加载 loadJS("page.js") [js] view plain copy //所有的JS文件 var jsM = { page : false , dhtmlXTree : false , photo_tree : false }; function getJSM(f) { var reg = ///(/w+)/./; jF = f.match(reg); return jF[jF.length-1]; } function loadJS(js) { id = getJSM(js); var scrīptId = document.getElementById(id); var head = document.getElementsByTagName('head').item(0); if(scrīptId) { //head.removeChild(id); } else { scrīpt = document.createElement('scrīpt'); scrīpt.src = js; scrīpt.type = 'text/javascrīpt'; scrīpt.id = id; head.appendChild(scrīpt); } } //JS时候,判断jsM中,代表其模块的标识是否为true,如果为false,则尚未加载 loadJS("page.js")
JavaScript의 EL 표현식 목록 컬렉션에서 값 탐색
<script></script> 태그에서 el 표현식을 사용하는 방법
위 내용은 JS 스크립트의 동적 로딩에 대한 핵심 답변의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!