如何在页面加载时运行函数?

小开

最佳答案

window.onload = codeAddress;应该工作- 这是一个演示，以及完整的代码:

.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function codeAddress() {
alert('ok');
}
window.onload = codeAddress;
</script>
</head>
<body>
    

</body>
</html>

.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function codeAddress() {
alert('ok');
}
        

</script>
</head>
<body onload="codeAddress();">
    

</body>
</html>

小开

看一下domReady脚本，它允许设置多个函数在DOM加载后执行。它基本上是Dom ready在许多流行的JavaScript库中所做的，但它是轻量级的，可以在外部脚本文件的开头使用和添加。

示例使用

// add reference to domReady script or place
// contents of script before here


function codeAddress() {


}


domReady(codeAddress);

小开

采用Darin的答案，但jQuery风格。(我知道用户要求javascript)。

running fiddle

$(document).ready ( function(){
alert('ok');
});

小开

而不是使用jQuery或window。自jQuery发布以来，原生JavaScript采用了一些很棒的函数。所有现代浏览器现在都有自己的DOM就绪函数，而无需使用jQuery库。

如果您使用本机Javascript，我建议您这样做。

document.addEventListener('DOMContentLoaded', function() {
alert("Ready!");
}, false);

小开

window.onload = function() {……等等不是一个很好的答案。

这可能会起作用，但它也会破坏已经挂钩到该事件的任何其他函数。或者，如果另一个函数在你的事件之后钩子到那个事件，它会破坏你的事件。所以，你可以花很多时间之后试图弄清楚为什么一些工作不再了

一个更有力的答案在这里:

if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}

我一直在使用的一些代码，我忘记了我在哪里找到它给作者的信用。

function my_function() {
// whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}

希望这对你有所帮助。

小开

替代解决方案。我更喜欢这种方式，因为它简洁，代码简单。

(function () {
alert("I am here");
})();

这是一个匿名函数，没有指定名称。这里所发生的是，函数被定义并一起执行。将它添加到正文的开头或结尾，这取决于它是在加载页面之前执行还是在加载所有HTML元素之后执行

小开

窗口。Onload将像这样工作:

function codeAddress() {
document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;

<!DOCTYPE html>
<html>
<head>
<title>learning java script</title>
<script src="custom.js"></script>
</head>
<body>
<p id="test"></p>
<li>abcd</li>
</body>
</html>

小开

尝试readystatechange

document.addEventListener('readystatechange', () => {
if (document.readyState == 'complete') codeAddress();
});

状态为:

加载 -文档正在加载(代码片段中没有触发)
互动 -解析文档，在DOMContentLoaded之前触发
完整的—在window.onload之前加载文档和资源

<script>
document.addEventListener("DOMContentLoaded", () => {
mydiv.innerHTML += `DOMContentLoaded (timestamp: ${Date.now()})</br>`;
});
  

window.onload = () => {
mydiv.innerHTML += `window.onload (timestamp: ${Date.now()}) </br>` ;
} ;


document.addEventListener('readystatechange', () => {
mydiv.innerHTML += `ReadyState: ${document.readyState}  (timestamp: ${Date.now()})</br>`;
    

if (document.readyState == 'complete') codeAddress();
});


function codeAddress() {
mydiv.style.color = 'red';
}
</script>


<div id='mydiv'></div>

小开

一旦页面加载，函数将运行:

(*your function goes here*)();

另外:

document.onload = functionName();
window.onload = functionName();

小开

我相信这是维护跨不同版本浏览器支持的最佳方法

if (window.addEventListener) {
window.addEventListener("load", myFunction, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", myFunction);
}
else {
window.onload = myFunction; //will override previously attached event listeners.
}

小开

通用跨浏览器网页加载器

我写了一个JavaScript页面加载器，应该解决你的问题加载页面后加载函数。这个网页加载器是99.9%的跨浏览器兼容性，与其他文章不同的是，它可以在许多版本的浏览器中工作，无论是旧版本还是新版本。支持在几乎所有浏览器中加载页面，包括Internet Explorer 3-11、所有Firefox和Chrome浏览器、早期Opera、所有移动浏览器、Netscape 4和6系列等。

它将为给定的浏览器选择最快的页面加载事件或状态检查，并返回一个文本字符串，表明JavaScript可以安全地处理文档对象模型(DOM)。应该可以在许多传统浏览器中工作，但测试。将JavaScript函数或库调用放在&;Start()&;方法，因此一旦脚本说web页面或DOM加载到浏览器中，它们就会被触发。

作为旁注，我建议你放置以下代码:

在html页面的头部，作为一个同步脚本嵌入<script>块中，它暂停页面以提前加载。李…或…< / >
在加载的外部<script>标记文件中，使用"async"属性的添加，使它与页面并行悄悄地加载，但在下载完成时暂停HTML加载，以便首先解析和处理它。

如果使用这些方法，脚本不应该呈现太多的块。你希望这个脚本在第一次构建网页DOM时就准备好，而不是在之后，特别是在页面的后期状态可能会因为等待图像、视频和JavaScript API的下载而延迟。

    // ======== AFTER PAGE LOADS CALL YOUR SCRIPTS HERE =========


function Start(status) {


// In most modern browsers the console should return:
// "Browser Loader : Document : DOMContentLoaded : interactive"
console.log(status);


// add your script calls here...


};






// ======== JAVASCRIPT PAGE LOADER =========
// Stokely Web Page loader, 2022


if (document.readyState) {


if (document.readyState === "complete" || document.readyState === "loaded") {


Start("Browser Loader : Document : readyState : complete");


} else {


if (window.addEventListener) {


// Never try and call 'DOMContentLoaded' unless the web page is still in an early loading state.


if (document.readyState === 'loading' || document.readyState === 'uninitialized') {


window.addEventListener('DOMContentLoaded', function () {


// Most modern browsers will have the DOM ready after this state.


if (document.readyState === "interactive") {


Start("Browser Loader : Document : DOMContentLoaded : interactive");


} else if (document.readyState === "complete" || document.readyState === "loaded") {


Start("Browser Loader : Document : DOMContentLoaded : complete");


} else {


Start("Browser Loader : Document : DOMContentLoaded : load");


}


}, false);


} else {


// FALLBACK LOADER : If the readyState is late or unknown, go ahead and try and wait for a full page load event. Note: This function below was required for Internet Explorer 9-10 to work because of non-support of some readyState values! IE 4-9 only supports a "readyState" of "complete".


if (document.readyState === 'complete' || document.readyState === "loaded") {


Start("Browser Loader : Document : readyState : complete");


} else {


window.addEventListener('load', function () {


Start('Browser Loader : Window : Event : load');


}, false);


}
}


// If 'addEventListener' is not be supported in the browser, try the 'onreadystate' event. Some browsers like IE have poor support for 'addEventListener'.


} else {


// Note: document.onreadystatechange may have limited support in some browsers.


if (document.onreadystatechange) {


document.onreadystatechange = function () {


if (document.readyState === "complete" || document.readyState === "loaded"){


Start("Browser Loader : Document : onreadystatechange : complete");


}


// OPTIONAL: Because several versions of Internet Explorer do not support "interactive" or get flagged poorly, avoid this call when possible.


//else if (document.readyState === "interactive") {
//Start("Browser Loader : Document : onreadystatechange : interactive");
//}


}


} else {


// Note: Some browsers like IE 3-8 may need this more traditional version of the loading script if they fail to support "addeventlistener" or "onreadystate". "window.load" is a very old and very reliable page loader you should always fall back on.


window.onload = function() {


Start("Browser Loader : Window : window.onload (2)");


};


}
}
}
} else {


// LEGACY FALLBACK LOADER. If 'document.readyState' is not supported, use 'window.load'. It has wide support in very old browsers as well as all modern ones. Browsers Firefox 1-3.5, early Mozilla, Opera < 10.1, old Safari, and some IE browsers do not fully support 'readyState' or its values. "window.load" is a very old and very reliable page loader you should always fall back on.


window.onload = function () {


Start("Browser Loader : Window : window.onload (1)");


};


};

注意:当您在web浏览器中运行此脚本时，请确保按F12拉出浏览器工具屏幕并检查控制台选项卡以查看结果。它会告诉你网页加载器在哪个阶段被触发，以及何时调用'Start()'脚本。

在大多数现代浏览器(HTML5或2010年后)中，它应该在HTML标记的DOM或文档对象模型被渲染时被触发，但其余的网页资源，CSS，图像，视频和其他文件仍在加载中。在现代浏览器中，这通常介于“交互式”的准备状态;和“;complete"DOM已经建立，但浏览器仍在下载其他资源文件。这允许JavaScript很早就访问并开始操作HTML树或DOM。

较旧的浏览器，如Internet Explorer v. 3-8或Netscape，不理解高级DOM检查，因此需要完整或“完整”;在调用JavaScript之前加载DOM和所有页面资源。