Question

好的，这就是情况：我有2页：

1 x html page
1 x外部javascript

现在在html页面中，将有内部javascript编码，以允许放置'window.onload'，以及其他特定于页面的方法/函数。

但是，在外部javascript中，我希望在触发'window.onload'事件之前完成某些事情。这是为了允许首先初始化自定义组件。

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

我之所以这样说的原因，是尝试制作可重复使用的代码（构建一次 - 全部使用），外部脚本必须在主html /中的javascript之前检查它是否在'order / check'中jsp / asp / php页面接管。而且我也不是在寻找JQuery @ _ @

的解决方案

以下是stackoverflow.com上的一些链接，我已经浏览了解决方案：
- Javascript - How to detect if document has loaded (IE 7/Firefox 3)
- How to check if page has FULLY loaded(scripts and all)?
- Execute Javascript When Page Has Fully Loaded

有人可以帮助或指导我找到解决方案吗，你的帮助会很高兴，请 - 谢谢：D

问候，克雷格

<小时/> [更新回复 - 2012年11月19日]

大家好，感谢您的建议和建议的解决方案，它们在搜索和测试可行解决方案时都非常有用。虽然我觉得我对自己的成绩并不是百分之百满意，但我知道你的建议和帮助让我更接近解决方案，并且确实可以在类似的情况下帮助其他人。

以下是我的想法：

test_page.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>

loader.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

Answer 1

基本上，你正在寻找这个：

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
};

see MDN了解详情。

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

因此，基本上，在您的外部脚本中，您将需要2个事件处理程序：一个用于readystatechange，它执行您需要在DOMready上完成的操作，以及一个window.onload，它将，根据定义，在文档准备好之后被解雇。（这会检查页面是否已满载）您知道，在IE＆lt; 9 window.onload中导致内存泄漏（因为DOM和JScript引擎是两个独立的实体，window对象永远不会完全卸载，并且侦听器不是GC “ED）。有一种方法可以解决这个问题，which I've posted here，但它非常冗长，但你知道......

Answer 2

如果您想在不等待任何事件的情况下立即完成某些事情，那么您可以在JavaScript中执行此操作 - 您无需为您的代码立即运行做任何事情，只是不要做任何事情会让你的代码等待。所以它实际上比等待事件更容易。

例如，如果你有这个HTML：

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

然后你的script.js中的任何代码将在id = 1的div之后但在解析id = 2的div之前运行。只是不要注册事件回调，而是立即在JavaScript中执行您需要的操作。

Answer 3

javascript从上到下运行。这意味着..如果你在你的内部javascript之前包含你的外部JavaScript，它只会在内部javascript运行之前运行。

Answer 4

您可以使用DOMContentLoaded事件：

addEventListener("DOMContentLoaded", function() {
    //Your code goes here
});

技巧是在addEventListener对象上调用window（未在JavaScript中指定，这是脚本的全局作用域）。实际上，Window类具有事件DOMContentLoaded，该事件在加载DOM之后立即触发。

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

4 个答案: