3

ページを実行すると、ページスクリプトjsdomの$(document).readyブロックが実行されていないようです。

これがhtmlです：

<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());
});

および出力：

Bee@cleanroom:~/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>

私は何が間違っているのですか？

満足のいく不条理なstackoverflow比率に詳細を追加します。

Bee@cleanroom:~/projects/notjs$ npm ls jsdom
notjs@1.0.0 /Users/Bee/projects/notjs
├─┬ jquery@1.8.3
│ └── jsdom@0.2.19
└── jsdom@0.3.3
Bee@cleanroom:~/projects/notjs$ node -v
v0.8.15
Bee@cleanroom:~/projects/notjs$ npm -v
1.1.66

[解決]：

私を正しい答えに導いてくれてありがとうデイブ。

完全なjsdomの答えは次のようになると思います。jsdom.jQuerifyを使用せず、スクリプトタグを追加して、ページ内スクリプトの上のページにjQueryをロードします（ブラウザでページをロードするために必要になるため）。

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());
    });
    ...
4

1 に答える 1

2

スクリプトが初めて解析されるときにjQueryがロードされていないため、$定義されていません。これは、それ$(document).readyが定義されていないため、関数が設定されていないことを意味します。コンソールにこれに関する警告が表示されているはずです。解決策は、document.ready関数を作成する前に、jQueryがロードされていることを確認することです。私はjsdomに精通していませんが、これを行うには2つの方法があります。

  1. 生成された<script>タグをインラインスクリプトの上に移動します。これは、jsdomでは可能である場合と不可能な場合があります。
  2. インラインスクリプトをjsdomコールバック内に移動します。ここには、すべてのconsole.log関数があります。この時点でjQueryがロードされているためです。編集：実際、jsdomはプリプロセッサのようなものだと思いますか？この場合、これは機能しないため、（1）を実行する必要があります。
于 2013-03-24T17:06:54.697 に答える