window.onload 触发时机问题

.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 5px }
.markdown-body h1 { font-size: 24px; line-height: 38px; margin-bottom: 5px }
.markdown-body h2 { font-size: 22px; line-height: 34px; padding-bottom: 12px; border-bottom: 1px solid rgba(236, 236, 236, 1) }
.markdown-body h3 { font-size: 20px; line-height: 28px }
.markdown-body h4 { font-size: 18px; line-height: 26px }
.markdown-body h5 { font-size: 17px; line-height: 24px }
.markdown-body h6 { font-size: 16px; line-height: 24px }
.markdown-body p { line-height: inherit; margin-top: 22px; margin-bottom: 22px }
.markdown-body img { max-width: 100% }
.markdown-body hr { border-top: 1px solid rgba(221, 221, 221, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75 }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body a { text-decoration: none; color: rgba(2, 105, 200, 1); border-bottom: 1px solid rgba(209, 233, 255, 1) }
.markdown-body a:active, .markdown-body a:hover { color: rgba(39, 91, 140, 1) }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) }
.markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(252, 252, 252, 1) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { color: rgba(102, 102, 102, 1); padding: 1px 23px; margin: 22px 0; border-left: 4px solid rgba(203, 203, 203, 1); background-color: rgba(248, 248, 248, 1) }
.markdown-body blockquote:after { display: block; content: "" }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
.markdown-body .contains-task-list { padding-left: 0 }
.markdown-body .task-list-item { list-style: none }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }

本文首发我的博客 - blog.cdswyda.com，转载务必保留作者和出处，以便追溯和错误修正。

本文关键点: window.onload 和 页面上 ajax 的成功回调到底哪个先触发。

答案是不确定。

问题详情

之前遇到一个现象，在父页面弹出一个Dialog加载一个子页面，在onload回调中传递一个参数给子页面，子页面异步ajax成功回调中要使用这个变量。

然而出现的情况是在ajax的成功回调中大多数情况下是取不到这个在onload传来的值，但是偶尔又是可以的。

查阅此Dialog源码，以上逻辑可以进行如下简化。

父页面：

<iframe id="iframe" src="./iframe.html" onload="onLoad()" frameborder="0"></iframe>
<script>
function onLoad() {
console.log('iframe load');
document.getElementsByTagName('iframe')[0].contentWindow.onLoad('load');
}
</script>

子页面:

<script>
$.ajax('./test.json').done(function (a) {
console.log('ajax结果');
console.log(a);
});
function onLoad(e) {
console.log('window onload')
console.log(e);
};
</script>

由于iframe的 onload 即要加载页面的 window.onload ，因此情况可以进一步简化为一个页面中到底是 window.onload 先触发还是 ajax 的成功回调先触发。

测试代码：

<script>
$.ajax('./test.json').done(function (a) {
console.log('ajax结果');
console.log(a);
});

function onLoad(e) {
console.log('window onload')
console.log(e);
};
window.onload = onLoad;
</script>

这个页面除了在测试的script之前引入了jQuery没有其他代码，应该毫无疑问，是 window.onload 先触发，之后才是 ajax 的成功结果。

结果也证明是 window.onload 先触发，上面代码在浏览器运行结果为：

// window onload
// Event {}
// ajax结果
// {}

MDN上关于 window.onload 有如下解释：

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

那么问题就来了，如果必然是 window.onload 先触发，那么是不可能出现最开始的问题的。

伪解释

继续修改测试代码，再加上一些东西：

<script>
$.ajax('./test.json').done(function (a) {
console.log('ajax结果');
console.log(a);
});

function onLoad(e) {
console.log('window onload')
console.log(e);
};
window.onload = onLoad;
// 其他代码xxx
// 模拟一个一分钟循环
var t1 = new Date().getTime();
while(new Date().getTime() - t1 < 1 * 60 * 1000) {
document.querySelectorAll('*');
}
</script>

写入一个一分钟的循环后，结果发生了改变：

// ajax结果
// {}
// window onload
// Event {}

这么来看就奇怪了呀， ajax 的成功比 window.onload 先触发。

关于这个现象，我也没找到权威的解释。

自己给了一个“合理”的解析：

window.onload 会在当前任务队列的最后一个触发。如最开始的例子，ajax 异步，尚未给出结果，页面需要等待的所有内容已经完成，任务队列为空，因此 window.onload 触发。

而后面这个由于 ajax 后面还有很长的代码要执行，这段代码推迟了 onload 的触发，同时这段代码还未执行完成时，之前异步的ajax已经返回了结果，成功回调的代码已经被加到了任务队列，因此 ajax 回调执行后才触发 window.onload。

再验证

为了进一步验证我上面的想法，那么只要保证页面资源执行完成时，ajax还没有解决即可。

因此还是上面的代码，但是将请求的内容换成一个真实接口，这个真实接口返回的数据更晚即可。

使用php暂停120s再返回结果，代码如下：

<?php
sleep(120);
echo '{"response":"two minutes later."}'
?>

结果却是如上面估计的一样：

// window onload
// Event {}
// ajax结果
// {"response":"two minutes later."}

可以说明之前的“合理”解释确实是合理的。

所以异步的 ajax 和 window.onload 到底哪个会先触发是不确定，和你js代码（或者其他onload要等待的资源，如一个图片加载很慢等）以及这个 ajax 的解决时间有关系。

因此这种情况下的传值就不能以这种方式进行，可以换成更稳妥的方式，如直接跨页面操作或者放在url进行传递。