JS_javascript 기술로 스크립트를 동적으로 로드하는 4가지 방법

js 파일이 상대적으로 작다면 하나의 js 파일을 사용하는 것이 좋습니다. 이렇게 하면 연결 수가 줄어들 수 있습니다. 다음은 일반적으로 사용되는 4가지 방법입니다. 마지막으로 스크립트하우스에서 하나를 추천해 드립니다.
1. 다이렉트 문서 작성

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

"); script>

2. 기존 스크립트의 src 속성을 동적으로 변경

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

3. 동적으로 스크립트 요소 생성

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

<script> <br>var oHead = document.getElementsByTagName('HEAD ').item(0); <br> var oScript= document.createElement("script"); <br>oScript.type = "text/javascript"; <br>oScript.src="test.js"; 🎜>oHead.appendChild( oScript); <br></script>

이 세 가지 메소드는 모두 비동기식으로 실행됩니다. 즉, 이러한 스크립트를 로드하는 동안 위의 방법을 사용하면 기본 페이지가 계속 실행되며 다음 코드는 예상한 효과를 얻지 못합니다.
동적으로 로드되는 JS 스크립트: a.js, 다음은 파일 내용입니다

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

var str = "China";

alert( "이것은 a.js의 변수입니다: " str ); 페이지 코드:

코드 복사

코드는 다음과 같습니다.


위 코드가 실행되면 a.js의 경고가 실행되고 메시지가 나타납니다.
그런데 메인페이지에 오류가 발생하고 대화상자도 뜨지 않습니다. 그 이유는 'str'이 정의되지 않았기 때문입니다. 왜 그렇습니까? 메인 페이지에서 str을 가져올 때 a.js가 완전히 로드되지 않았기 때문입니다. 스크립트를 동기적으로 실행해야 하는 경우 아래 네 번째 방법을 사용할 수 있습니다.

4. 원리: XMLHTTP를 사용하여 스크립팅할 콘텐츠를 얻은 다음 스크립트 개체를 만듭니다.

참고: 오류를 방지하려면 a.js를 UTF8 인코딩으로 저장해야 합니다. 서버와 XML은 UTF8 인코딩을 사용하여 데이터를 전송하기 때문입니다.
메인 페이지 코드:


코드 복사

코드는 다음과 같습니다.

<스크립트 언어="JavaScript">
function GetHttpRequest()
{
if ( window.XMLHttpRequest ) // Gecko
return new XMLHttpRequest() ;
else if ( window.ActiveXObject ) // 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 )
{
IncludeJS( sId, url, oXmlHttp.responseText );
}
else
{
alert( 'XML 요청 오류: ' 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 oScript = document.createElement( "script" );
oScript.언어 = "자바스크립트";
oScript.type = "텍스트/자바스크립트";
oScript.id = sId;
oScript.defer = true;
oScript.text = 소스;
oHead.appendChild(oScript);
}
}
AjaxPage( "scrA", "b.js" );
alert("主页면动态加载JS脚本。");

现在完成了一个JS脚本的动态加载。

复代代码 代码如下:

var Rash=true;
var msg="";
function norash()
{
if (confirm("确定要取消吗"))
Rash=false;
}
함수라시트()
{
setInterval('getrss()',Inttime);
}
function getrss()
{
if (Rash==true)
{
head=document.getElementsByTagName('head').item(0);
script=document.createElement('스크립트');
script.src='INCLUDE/AutoUpdate.asp';
script.type='text/javascript';
script.defer=true;
void(head.appendChild(스크립트));
window.status=msg;
}
}
rashit();

注意文字加粗的地方，大家可以情况选择。