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



我尝试搜索类似的问题,但是当我们在没有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.jsscript.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') }

相关内容

  • 没有找到相关文章

最新更新