logo标签列表

JavaScript - 异步加载代码时替代 window.onload 的方法

javascript
4

我有一个计算器要集成到我的网站中。通常情况下，当单独打开页面时，计算器会初始化以下函数：

window.onload = function () {

/* Initializes calculator */

}

不过，当用户请求时我异步加载了这个计算器，它不是默认加载到页面上的。那么在异步加载到页面上后，我该如何初始化这个计算器呢？我的问题在于 window.onload=function() 用于初始化计算器，在我将计算器异步加载到页面上时无法正常工作，因为此时 window.onload 已经发生。当我异步加载计算器时，应该使用什么函数来初始化这个计算器呢？ 

// 1. Page loads
// 2. Calculator is brought to page asynchronously 
// 3. Code below executes to initialize the calculator

***something else*** = function () {

/* Initializes calculator */

}
2
你如何加载计算器？肯定有一个回调函数来处理这个加载。 - Louys Patrice Bessette
1
这取决于您使用的将计算器“异步地带到页面上”的方法。 - Randy Casburn
我正在使用一个ajax调用PHP文件，该文件加载计算器的HTML/CSS/JS。 - user10443410
避免使用 onload，始终优先选择使用 addEventListener()。 - Dai
2
可能你过于关注“minimal”而没有足够注意到“reproducible”的方面了，这是一个最小化、可复现示例的重要组成部分 ;) - Louys Patrice Bessette
如果你的计算器代码是动态加载的，它将在加载时立即运行。在 ***something else*** = function... 的位置上，尝试简单地使用 console.log("I got loaded");。 - user2740650
1个回答
2
将你分配给 onload 的匿名函数从这个更改为...
window.onload = function() {
    // stuff
};

将代码绑定到一个命名函数，直接或间接地根据document.readyState调用，例如：

function initCalculator() {
    // stuff
}

if( document.readyState === 'loading' ) {
    document.addEventListener( 'DOMContentLoaded', initCalculator );
}
else if( document.readyState === 'interactive' || document.readyState === 'complete' ) {
    initCalculator ();
}
  • 如果 <script> 是普通（静态）HTML的 <head> 的一部分，并同步加载或使用 defer，则当 'DOMContentLoaded' 触发时，initCalculator 函数将运行。
  • 如果 <script> 是普通（静态）HTML的 <head> 的一部分，带有 async，或者在页面加载后添加了 <script>，那么如果异步脚本是在 DOMContentLoaded 之后加载，则 initCalculator 函数将立即运行；如果它在 DOMContentLoaded 之前加载，则会根据情况运行。

为了更加安全，您可以在 <html> 上使用 dataset 条目来防止重复初始化（这比在 window 上添加属性更安全）：

function initCalculator() {
    if( document.documentElement.dataset['calcLoaded'] === 'true' ) return;
    
    // do stuff

    document.documentElement.dataset['calcLoaded'] = 'true';
}

if( document.readyState === 'loading' ) {
    document.addEventListener( 'DOMContentLoaded', initCalculator );
}
else if( document.readyState === 'interactive' || document.readyState === 'complete' ) {
    initCalculator ();
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接