2012-05-04 2 views
0

내 소스 코드에 eventhandling에 객체의 상태를 가져 오기 :자바 스크립트

<!doctype html> 
<html> 
<head> 
    <title>onload test</title> 
    <link type="text/css" rel="stylesheet" href="spot.css" media="screen" /> 

</head> 
<body> 
    <h1>Welcome Page</h1> 

    <script> 

     debugger; 
     function constructScripts(url, callBack) { 
      var script = document.createElement("script"); 
      script.type = "text/javascript"; 
      script.src = url; 
      document.getElementsByTagName("head")[0].appendChild(script); 
      if (script.readyState) { 
       script.onreadystatechange = function() { 
        if (script.readyState == "loaded" || script.readyState == "complete") { 
         script.onreadystatechange = null; callBack(); 
        } 
       }; 
      } 
      else { 
       script.onload = callBack; 
      } 
     } 


    </script> 
    <script> 
     debugger; 
     myCallBack = function() { 
      alert(this.src + "loaded"); 
     } 

     constructScripts("files1", myCallBack); 
     constructScripts("files2", myCallBack); 
     constructScripts("files3", myCallBack); 

    </script> 

</body> 
</html> 

this.src 여기에 정의되어 있지 않습니다. 이 파일 이름을 읽을 수 있도록 src 속성이 있어야하는 '스크립트'개체 여야합니다. 여기서 '여기'는 누구입니까? 또한 페이지 원본을 볼 때 이러한 스크립트는 header() 섹션에 포함되지 않았습니다. 왜 그래야만하지? 감사.

답변

1

this.src는 여기에서 정의되지 않습니다.

그것은 안 ... 그것은 이전의 정의 :

script.src = url 나는이 내가 파일 이름을 읽을 수 있도록 자사의 SRC 속성이 가정에 '스크립트'개체 수 있어야 같아요. 여기서 '여기'는 누구입니까?

스크립트 요소하는시 onload 또는 readystatechange 이벤트가 발생

그리고 내가 페이지 소스를 볼 때 이러한 스크립트는 헤더() 섹션에 포함되지 않았다. 왜 그래야만하지?

JavaScript로 조작 한 후 라이브 DOM의 직렬화가 아니라 페이지 소스를보고 있기 때문에.

1

callBack으로 전화하면 callBack(script)과 같은 스크립트 개체를 전달하십시오. dinamically로드 요소를 표시하지 않습니다

myCallBack = function (script) { 
     alert(script.src + "loaded"); 
    } 

소스보기와 같은 callBack 기능을 수정합니다.

0

프로토 타입을 사용하여 기능을 확장해야합니다. 편집 된 코드

<!doctype html> 
<html> 
<head> 
    <title>onload test</title> 
    <link type="text/css" rel="stylesheet" href="spot.css" media="screen" /> 

</head> 
<body> 
    <h1>Welcome Page</h1> 

    <script> 
     Element.prototype.MyMethod = function(){} 
     function constructScripts(url, callBack) { 
      var script = document.createElement("script"); 
      script.type = "text/javascript"; 
      script.src = url; 
      script.MyMethod = callBack; 
      document.getElementsByTagName("head")[0].appendChild(script); 
      if (script.readyState) { 
       script.onreadystatechange = function() { 
        if (script.readyState == "loaded" || script.readyState == "complete") { 
         script.onreadystatechange = null; 
       script.MyMethod(); 
        } 
       }; 
      } 
      else { 
       script.onload = callBack; 
      } 
     } 


    </script> 
    <script> 
     myCallBack = function() { 
      alert(this.src + "loaded"); 
     } 

     constructScripts("files1", myCallBack); 
     constructScripts("files2", myCallBack); 
     constructScripts("files3", myCallBack); 
    </script> 

</body> 
</html> 
+0

script.MyMethod()에서

Element.prototype.MyMethod = function(){} 

봐; 빈 메서드를 호출하고 아무 것도 수행하지 않습니다. 그리고 Element.prototype.MyMethod의 의미는 무엇입니까 –

+0

Ow ya? 내 브라우저에서는 괜찮습니다. 메소드를 확장하기 위해 프로토 타이핑이라고합니다. 'document.createElement ("script"); '그 Element 인스턴스를'script'가 호출하면 우리는 MyMethod에 의해 확장 된 Element 객체를 호출합니다. 함수 내에서 script.MyMethod를 CallBack에 할당합니다. 그래서, 우리가'script.MyMethod();'를'script'로 채워진 메소드 안에 호출 할 때 –