Question

我尝试搜索类似的问题，但是当我们在不使用jsdom.JSDOM()的情况下使用jsdom.env()并在内部创建新的script节点时，没有一个现有的问题可以解决这个特定问题JSDOM个对象。

这是bar.js中的代码。

console.log('bar says: hello')

这是foo.js中的代码。

var jsdom = require('jsdom')
var html = '<!DOCTYPE html><html><head><title>Foo</title></head><body><div></div></body></html>'
var window = new jsdom.JSDOM(html, { runScripts: "dangerously", resources: "usable" }).window
var script = window.document.createElement('script')
script.src = 'bar.js'
script.onload = function () { console.log('script loaded') }
window.onload = function () { console.log('window loaded') }

运行此命令时，只会得到以下输出：

$ node foo.js
window loaded

bar.js和script.onload均未执行。我该如何解决？

Answer 1

为了使浏览器加载script元素，它必须是文档的一部分。 JSDOM和Chrome，Firefox等浏览器都是如此。

您创建了一个script元素，但是我看不到您将其添加到window.document的任何位置。（创建与将其添加到文档中是不同的。）诸如window.document.body.appendChild(script)这样简单的操作就可以完成。

JSDOM将无法找到您的脚本，除非您告诉它它在哪里。由于您要它解析字符串，因此JSDOM使用的基本URL并不是您所需要的。您可以通过指定一个url来解决此问题，该问题告诉JSDOM使用什么路径来解析相对路径。例如：

var window = new jsdom.JSDOM(html, { url: "file://.", runScripts: "dangerously", resources: "usable" }).window

这将添加url: "file://."。如果bar.js文件与调用JSDOM的脚本位于同一位置，则它将起作用。

Answer 2

这可能有效：jsdom版本：16.4.0，nodejs版本：12.6.0

const jsdom = require("jsdom");

var html = '<!DOCTYPE html><html><head><title>Foo</title></head><body><script></script><div></div></body></html>'
var window = new jsdom.JSDOM(html, { url: "file://.", runScripts: "dangerously", resources: "usable" }).window
var script = window.document.createElement('script')
script.src = 'bar.js'
window.document.body.appendChild(script);  // <== need to append the script child
script.onload = function () { console.log('script loaded') }
window.onload = function () { console.log('window loaded') }

如何执行在JSDOM中动态创建的另一个脚本节点？

2 个答案: