Question

我看起来当我通过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

[解决方案]：

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

Answer 1

首次解析脚本时未加载jQuery，因此未定义$。这意味着未定义$(document).ready，因此未设置您的功能。您应该在控制台中看到有关此问题的警告。解决方案是在创建document.ready函数之前确保已加载jQuery。我对jsdom并不熟悉，但有两种方法可以解决这个问题：

将生成的<script>标记移到内联脚本上方。这可能是也可能不是jsdom。
将您的内联脚本移动到jsdom回调中，其中包含所有console.log函数。因为到目前为止已经加载了jQuery。编辑：实际上我认为jsdom就像一个预处理器？在这种情况下，这个不起作用，你需要做（1）。

jsdom和$（文件）.ready

1 个答案: