jsdom 및 $ (document) .ready

jsdom을 통해 페이지를 실행할 때 페이지 스크립트의 $(document).ready 블록이 실행되지 않는 것 같습니다.

<html> 
<body> 
    If everything works, you should see a message here: <h2 id="msg"></h2> 

    <script> 
    var checkpoint1 = true 
    var checkpoint2 = false 
    $(document).ready(function(){ 
     checkpoint2 = true 
     $('#msg').html("It works, it works, it works!") 
    }) 
    </script> 
</body> 
</html>

과 codez :

fs = require('fs'); 
htmlSource = fs.readFileSync("public/examples/test_js_dom.html", "utf8"); 

global.jsdom = require("jsdom"); 

jsdom.defaultDocumentFeatures = { 
    FetchExternalResources : ['script'], 
    ProcessExternalResources : ['script'], 
    MutationEvents   : '2.0', 
    QuerySelector   : false 
}; 

doc = jsdom.jsdom(htmlSource) 
window = doc.createWindow() 
jsdom.jQueryify(window, "http://code.jquery.com/jquery-1.8.3.min.js", function(){ 
    console.log(window.checkpoint1); 
    console.log(window.checkpoint2); 
    console.log(window.$().jquery) 
    console.log("body:"); 
    console.log(window.$('body').html()); 
});

출력 :

[email protected]:~/projects/notjs$ test/jsdom.js 
true 
false 
1.8.3 
body: 

     If everything works, you should see a message here: <h2 id="msg"></h2> 

     <script> 
     var checkpoint1 = true 
     var checkpoint2 = false 
     $(document).ready(function(){ 
      checkpoint2 = true 
      $('#msg').html("It works, it works, it works!") 
     }) 
     </script> 
    <script class="jsdom" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

내가 잘못 뭐하는 거지 여기

는 HTML입니까?

만족스럽지 못한 스택 오버 플로우 율에 세부 사항 추가.

[email protected]:~/projects/notjs$ npm ls jsdom 
[email protected] /Users/Bee/projects/notjs 
├─┬ [email protected] 
│ └── [email protected] 
└── [email protected] 
[email protected]:~/projects/notjs$ node -v 
v0.8.15 
[email protected]:~/projects/notjs$ npm -v 
1.1.66

[해결] :

정답에 저를 선도하는 당신에게 데이브 감사드립니다.

나는 완전한 jsdom 대답이 이것 같이 간다 고 생각한다; jsdom.jQuerify를 사용하지 말고, 페이지 스크립트 위 페이지에서 jQuery를로드하는 script 태그를 추가하십시오 (브라우저에서 페이지를로드하기 위해 필요함).

HTML :

... 
    If everything works, you should see a message here: <h2 id="msg"></h2> 

    <script src="http://notjs.org/vendor/jquery-1.8.3.min.js"></script> 
    <script> 
     var checkpoint1 = true 
     var checkpoint2 = false 
     $(document).ready(function(){ 
     var checkpoint2 = true 
    ...

코드 :

... 
    doc = jsdom.jsdom(htmlSource) 
    window = doc.createWindow() 
    window.addEventListener('load', function(){ 
     console.log(window.checkpoint1); 
     console.log(window.checkpoint2); 
     console.log(window.$().jquery) 
     console.log("body:"); 
     console.log(window.$('body').html()); 
    }); 
    ...

출처

2013-03-24 Bee Wilkerson

jQuery를이 스크립트가 처음으로 구문 분석 할 때로드되지 않은, 그래서 $가 정의되어 있지 않습니다. 즉, $(document).ready이 정의되지 않았으므로 함수가 설정되지 않습니다. 콘솔에 대한 경고가 표시되어야합니다. 해결책은 document.ready 함수를 만들기 전에 jQuery가로드되었는지 확인하는 것입니다. 나는 jsdom에 익숙하지 않다. 그러나 이것에 관해 갈 수있는 두 가지 방법이있다 :

생성 된 <script> 태그를 인라인 스크립트 위로 옮긴다. 이것은 jsdom으로 가능할 수도 있고 불가능할 수도 있습니다.
모든 console.log 기능이있는 jsdom 콜백에서 인라인 스크립트를 이동하십시오. 왜냐하면이 시점에서 jQuery가로드 되었기 때문입니다. 편집 : 사실 jsdom 전처리기 같아요? 이 경우에는 작동하지 않으며 (1)해야합니다.

출처

2013-03-24 17:06:54 Dave

Duh! 예, 정답은 페이지 스크립트에 jquery를로드하기 위해 스크립트 태그를 페이지에 추가하는 것입니다. 감사! –

jsdom 및 $ (document) .ready

답변

관련 문제