以编程方式触发 jsdom 窗口中的滚动或按键事件

Posted 2023-05-09

【中文标题】以编程方式触发 jsdom 窗口中的滚动或按键事件

【英文标题】：programmatically triggering a scroll or a keypress event in jsdom window

【发布时间】：2014-01-22 14:13:02

【问题描述】：

我试图在jsdom 下加载的窗口上触发scroll 事件或keypress 事件。我已经使用jsdom.jsdom() 函数加载了窗口，并且它加载了外部资源（即页面本身上的脚本）。基本上我试图触发这些事件，以便页面上的 javascript 可以监听这些事件并加载下一页数据，因为页面在滚动到底部时具​​有自动加载功能。但是我在触发scroll 事件时遇到了麻烦，更不用说将scroll 触发到页面底部了。它只是卡住了，什么都没有发生。

我还尝试使用end 的键触发keypress 事件，但为此我什至无法为按键设置处理程序。再次陷入困境。

我在窗口上使用jsdom.jqueryify() 将jquery 代码嵌入其中。我想 有了它，我可以使用 .scroll() 之类的 jquery 函数来设置测试处理程序，但它再次卡住了，没有给出任何错误消息。 代码如下：

var document = jsdom.jsdom(str, null, );
var window = document.parentWindow;

jsdom.jQueryify(window, "jquery.js", function () 
    $(window).scroll(function()
        console.log("Scroll Happened.");
    );
    console.log("Triggering Scroll event...");  // 1
    $(window).trigger('scroll');
    console.log("Scroll event triggered.");     // 2

此代码甚至没有达到第 1 位，但是如果我将 $(window) 更改为 window 它超过第 1 位但仍然没有达到第 2 位。

我也试过了：

window.dispatchEvent('scroll');
window.scrollByLines(1);

代替：

window.trigger('scroll');

但没有变化。任何帮助将不胜感激。谢谢

【参考方案1】：

问题很简单：$ 未在代码执行的上下文中定义。解决方法是将参数window 和$ 添加到您的回调中。正如您所料，它们由jQueryify 初始化。以下输出到控制台您想要的一切：

var jsdom = require("jsdom");

var document = jsdom.jsdom();
var window = document.parentWindow;

jsdom.jQueryify(window, "jquery-1.10.2.js", function (window, $) 
    try 
        $(window).scroll(function()
            console.log("Scroll Happened.");
        );
        console.log("Triggering Scroll event...");  // 1
        $(window).trigger('scroll');
        console.log("Scroll event triggered.");     // 2
    
    catch (ex) 
        console.log(ex);
    
);

我添加了try ... catch 用于说明目的。如果从参数中删除window, $，您可以看到try ... catch 捕获了ReferenceError，因为$ 未定义。

这里的教训是 jsdom 有效地创建了一个新的 JavaScript 虚拟机，它在其中执行窗口加载的脚本。因此，在此虚拟机中定义的符号不必在其外部定义。而在jsdom虚拟机内部和定义的同名符号一般不会指向同一个object。 （比如jsdom创建的虚拟机外面的console和里面的console不是同一个对象。）

【讨论】：

感谢@Louis 清除了很多。虽然我决定使用 phantomjs 来满足我所有的数据收集需求。 jsdom 似乎还有其他的限制，但是对于轻量级的浏览器模拟来说还是不错的。再次感谢。