我尝试搜索类似的问题,但是当我们在没有jsdom.env()
的情况下使用jsdom.JSDOM()
时,以及当我们在JSDOM
对象中动态创建新的script
节点时,现有的问题都没有解决这个特定问题。
这是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
都不会被执行。我该如何解决这个问题?
为了让浏览器加载您的script
元素,它必须是文档的一部分。 JSDOM以及Chrome,Firefox等浏览器都是如此。
您创建了一个script
元素,但我没有看到您将其添加到任何地方window.document
。(创建它与将其添加到文档中不同。像window.document.body.appendChild(script)
这样简单的事情就可以做到。
JSDOM 将无法找到你的脚本,除非你告诉它它在哪里。由于您要求它解析字符串,因此 JSDOM 使用的基本 URL 不是您需要的 URL。您可以通过指定一个url
来解决此问题,该告诉 JSDOM 使用什么路径来解析相对路径。例如:
var window = new jsdom.JSDOM(html, { url: "file://.", runScripts: "dangerously", resources: "usable" }).window
这增加了url: "file://."
.如果bar.js
文件与调用 JSDOM 的脚本位于同一位置,它将起作用。
这可能是工作: 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') }