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>

和编码：

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

[解决方案]：

感谢 Dave 引导我找到正确的答案。

我认为完整的 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，但是有两种方法可以解决这个问题：

  1. 将生成的<script>标签移到您的内联脚本上方。jsdom 可能会也可能不会。
  2. 将您的内联脚本移到 jsdom 回调中，在那里您拥有所有 console.log 函数。因为此时 jQuery 已被加载。编辑：实际上我认为 jsdom 就像一个预处理器？在这种情况下，这个不起作用，你需要做（1）。
于 2013-03-24T17:06:54.697 回答