在jsDom中设置窗口宽度？答案

【问题标题】：Set window width in jsDom?在jsDom中设置窗口宽度？
【发布时间】：2014-12-18 06:50:05
【问题描述】：

应该是一个简单的问题。如何在 jsDom 对象中设置宽度？

    jsdom.env({
        url:'http://testdatalocation',
        scripts: ['http://code.jquery.com/jquery.js'],
        done: function(errors, tstWindow) {
            console.log(tstWindow.innerWidth);
};
}
});

我不知道如何将“innerWidth”设为 1024 以外的任何值

【问题讨论】：

您的最后一句话暗示您尝试这样做，但没有成功。你尝试了什么？
很多东西。我试过 tstWindow.resizeTo(#) tstWindow.resizeBy(#) 设置一个“width”属性，设置一个 innerWidth 属性，以及其他一些我不记得的东西。
我怀疑我遇到困难的部分原因是 API 更改，但我似乎还没有完全了解 jsDom。（感谢您对我的另一个问题的帮助，路易斯，这是同一件事的延续）

标签： node.js jsdom

【解决方案1】：

resizeTo 和 resizeBy 方法未实现。通过搜索jsdom的代码库可以看到：

$ grep -P 'resize(To|By)' `find . -type f`
./lib/jsdom/browser/index.js:    resizeBy: NOT_IMPLEMENTED(null, 'window.resizeBy'),
./lib/jsdom/browser/index.js:    resizeTo: NOT_IMPLEMENTED(null, 'window.resizeTo'),

如果您只想在初始化时一劳永逸地设置窗口大小，您可以将innerWidth 值设置为您想要的任何值。在真正的浏览器中，这不是正确的做法，但在 jsdom 中它可以工作。

但是，如果您的代码依赖于存在的 resizeTo，您可以将自己的 polyfill 添加到构建窗口的构造函数中：

var jsdom = require("jsdom");

var document = jsdom.env({
    html: "<html></html>",
    done: function (error, w) {
        console.log(w.innerWidth, w.innerHeight);
        w.constructor.prototype.resizeTo = function (width, height) {
            this.innerWidth = this.outerWidth = width;
            this.innerHeight = this.outerHeight = height;
        };
        w.resizeTo(100, 200);
        console.log(w.innerWidth, w.innerHeight);
    }
});

这显示：

1024 768
100 200

上面的代码用于说明目的。我没有考虑过为resizeTo 编写 polyfill 的所有细节。 resizeBy 的处理方式类似，但会增加窗口大小的增量。

【讨论】：

谢谢，我得稍微分析一下。

【解决方案2】：

目前没有正式的选项或 API 可以这样做。

innerWidth 和类似属性的值只是set to literal values：

DOMWindow.prototype = createFrom(dom || null, {
  // ...
  name: 'nodejs',
  innerWidth: 1024,
  innerHeight: 768,
  outerWidth: 1024,
  outerHeight: 768,
  // ...
});

除了测试用例和文档，outerWidth isn't referenced elsewhere else in jsdom，因此您可以在created event 中分配一个新值，同时更新outerWidth。

created 的主要用例是在执行任何脚本之前修改窗口对象（例如，在内置原型上添加新功能）。

created: function (errors, tstWindow) {
    tstWindow.outerWidth = tstWindow.innerWidth = 1440;
},
done: function(errors, tstWindow) {
    console.log(tstWindow.innerWidth);
}

【讨论】：

这会传递给页面上的任何 javascript 吗？
@SkipHuffman 如果移动到created 事件，而不是像我所拥有的done，是的。该事件的目的是允许在运行任何脚本之前修改 window。