以編程方式觸發jsdom窗口中的滾動或按鍵事件

Question

我試圖在我在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
}

此代碼甚至沒有達到第一的位置，但是如果我改變$(window)到window它跨越第一的位置，但仍然沒有達到第2位。

我也嘗試過：

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

代替：

window.trigger('scroll');

但沒有變化。 任何幫助將不勝感激。 謝謝

Answer 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虛擬機內部及其外部定義的同名符號通常不指向同一對象 。 （例如， console通過jsdom和創建的虛擬機以外console在其內部不相同的對象。）