28

情况如下：我有 2 页：

  • 1 个 html 页面
  • 1 x 外部 Javascript

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

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

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

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

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

有人可以帮助或指导我找到解决方案，您的帮助将不胜感激。

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

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

这是我想出的：

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>

加载器.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

4

4 回答 4

21

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

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<9window.onload中会导致内存泄漏（因为 DOM 和 JScript 引擎是两个独立的实体，window对象永远不会完全卸载，并且侦听器不会被 GC 处理）。有一种方法可以解决这个问题，我已经在这里发布了，虽然它很冗长，但你知道......

于 2012-11-07T13:07:10.130 回答
4

如果您想在不等待任何事件的情况下立即完成某事，那么您可以在 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 中执行您需要的操作。

于 2012-11-07T13:04:36.873 回答
3

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

于 2012-11-07T13:03:19.557 回答
1

也可以使用接口的DOMContentLoaded事件Window。

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

上面的代码实际上是在window对象中添加了事件监听器，虽然它没有被限定为，window.addEventListener因为window对象也是网页中 JavaScript 代码的全局范围。

DOMContentLoaded发生在之前load，当网页的图像和其他部分仍未完全加载时。但是，在初始调用堆栈中添加到 DOM 的所有元素都保证在此事件之前已经添加到它们的父级。

于 2018-07-01T20:14:07.250 回答