如何在 window.load 之前和加载 DOM 之后执行代码?

新手上路,请多包涵

情况是这样的:我有 2 页:

  • 1 x html 页面

  • 1 个外部 Javascript

现在在 html 页面中,将有内部 Javascript 编码以允许放置 window.onload 和其他页面特定方法/功能。

但是,在外部 Javascript 中,我希望在触发 window.onload 事件之前完成某些事情。这是为了让定制的组件首先被初始化。

有没有办法确保在触发 window.onload 事件之前在外部 Javascript 中进行初始化?

我问这个的原因是试图制作可重用的代码(构建一次 - 全部使用),外部脚本必须在主 html/jsp/asp 中的 Javascript 之前检查它是否处于“顺序/检查”状态/PHP 页面接管。而且我也没有在 jQuery @_@ 中寻找解决方案

以下是我浏览过的 Stack Overflow 上的一些链接以寻求解决方案:

有人可以帮助或指导我找到解决方案,非常感谢您的帮助。


[更新回复 - 2012 年 11 月 19 日]

大家好,感谢您的建议和建议的解决方案,它们都有助于搜索和测试可行的解决方案。虽然我觉得我对自己的结果不是 100% 满意,但我知道你的建议和帮助使我更接近解决方案,并且确实可以帮助处于类似情况的其他人。

这是我想出的:

测试页面.html

 <html>
<head>
<title></title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript" src="test_script_1.js"></script>
<script type="text/javascript" src="test_script_2.js"></script>
<script type="text/javascript">
window.onload = function() {
    document.getElementById("div_1").innerHTML = "window.onload complete!";
}
</script>

<style type="text/css">
div {
    border:thin solid #000000;
    width:500px;
}
</head>
<body>
    <div id="div_1"></div>

    <br/><br/>

    <div id="div_2"></div>

    <br/><br/>

    <div id="div_3"></div>
</body>
</html>

加载器.js

 var Loader = {
    methods_arr : [],

    init_Loader : new function() {
        document.onreadystatechange = function(e) {
            if (document.readyState == "complete") {
                for (var i = 0; i < Loader.methods_arr.length; i++) {
                    Loader.method_arr[i]();
                }
            }
        }
    },

    load : function(method) {
        Loader.methods_arr.push(method);
    }
}

test_script_1.js

 Loader.load(function(){initTestScript1();});

function initTestScript1() {
    document.getElementById("div_1").innerHTML = "Test Script 1 Initialized!";
}

test_script_2.js

 Loader.load(function(){initTestScript2();});

function initTestScript2() {
    document.getElementById("div_2").innerHTML = "Test Script 2 Initialized!";
}

这将确保在调用 window.onload 事件处理程序之前调用脚本,但也确保首先呈现文档。

您如何看待这个可能的解决方案?

再次感谢大家的帮助和帮助:D

原文由 EthiopionZA 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.1k
2 个回答

基本上,您正在寻找这个:

 document.onreadystatechange = function(e)
{
    if (document.readyState === 'complete')
    {
        //dom is ready, window.onload fires later
    }
};
window.onload = function(e)
{
    //document.readyState will be complete, it's one of the requirements for the window.onload event to be fired
    //do stuff for when everything is loaded
};

有关详细信息, 请参阅 MDN

请记住,可能会在此处加载 DOM,但这并不意味着已加载外部 js 文件,因此您 可能 无法访问该脚本中定义的所有函数/对象。如果你想检查它,你必须使用 window.onload ,以确保所有外部资源也已加载。

所以,基本上,在您的外部脚本中,您将需要 2 个事件处理程序:一个用于 readystatechange ,它执行您需要在 DOMready 上完成的操作,以及一个 window.onload,它将通过定义,在文件准备好 后被 解雇。 (这会检查页面是否已完全加载)。

正如您所知,在 IE window.onload 中导致内存泄漏(因为 DOM 和 JScript 引擎是两个独立的实体, window 对象永远不会完全卸载,并且侦听器不是GC’ed)。有一种方法可以解决此问题, 我已将其发布在这里,虽然它非常冗长,但只是想让你知道……

原文由 Elias Van Ootegem 发布,翻译遵循 CC BY-SA 3.0 许可协议

如果你想立即完成某些事情而不等待任何事件,那么你可以在 JavaScript 中完成它 - 你不必为代码立即运行做任何事情,只是不要做任何会让你代码等等。所以它实际上比等待事件更容易。

例如,如果你有这个 HTML:

 <div id=one></div>
<script src="your-script.js"></script>
<div id=two></div>

那么 your-script.js 中的任何代码都将在 id=one 的 div 之后但在解析 id=two 的 div 之前运行。只是不要注册事件回调,而是立即在 JavaScript 中执行您需要的操作。

原文由 rsp 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题