这是我在中学到的一个新问题:当脚本是从加载的脚本中动态创建的DOM节点时,脚本onload和window.onload的顺序是否定义良好?
在上一个问题中,我们了解到,当窗口加载脚本时,任何脚本(直接加载的脚本以及脚本动态加载的脚本(都将首先完成加载,并且只有在加载之后才会触发window.onload
。
但JSDOM的表现似乎有所不同。
这是loader.js
脚本,与上一个问题中的脚本相同:
function main()
{
if (typeof window !== 'undefined') {
var script = window.document.createElement('script')
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.min.js'
script.onload = function () { console.log('script loaded') }
window.onload = function () { console.log('window loaded') }
window.document.head.appendChild(script)
} else {
console.log('window not available yet')
}
}
if (typeof module !== 'undefined' && module.exports) {
exports.main = main
}
main()
以下是通过JSDOM伪装成假窗口的驱动程序代码。
var jsdom = require('jsdom')
var loader = require('./loader.js')
var html = `<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="loader.js"></script>
</head>
<body>
<div>Test</div>
</body>
</html>`
global.window = new jsdom.JSDOM(html, { runScripts: "dangerously", resources: "usable" }).window
这是输出:
$ node fakewindow.js
window not available yet
window loaded
script loaded
window.onload
事件在script.onload
事件激发之前激发。为什么即使HTML中直接包含的脚本加载的动态脚本还没有加载,JSDOM也会考虑加载窗口?这是JSDOM中的一个错误,还是相关W3C标准允许这种行为?
看起来像是JSDOM中的一个bug。
它似乎在最新版本13.0.0
中得到了解决,请尝试更新JSDOM。
我已经为jsdom13尝试了相同的代码,并且它是有效的。
window not available yet
script loaded
window loaded
而jsdom11确实显示了问题:
window not available yet
window loaded
script loaded