我想在加载页面时运行一个函数，但我不想在<body>标记中使用它。
我有一个脚本，如果我在<body>中初始化它，就会运行，像这样:
function codeAddress() {
// code
}
<body onLoad="codeAddress()">
但我想运行它没有<body onload="codeAddress()“>和我尝试了很多东西，例如:
window.onload = codeAddress;
但这并不奏效。
那么，当页面加载时，我如何运行它呢?
当前回答
采用Darin的答案，但jQuery风格。(我知道用户要求javascript)。
运行的小提琴
$(document).ready ( function(){
alert('ok');
});
其他回答
窗口。Onload将像这样工作:
函数codeAddress() { . getelementbyid(“测试”).innerHTML =日期(); ｝ 窗口。onload = codeAddress; <！DOCTYPE html > < html > < >头 <title>learning Java script</title> . < script src = " custom.js " > < /脚本> > < /头 身体< > < p id = "测试" > < / p > <李> abcd李< / > 身体< / > < / html >
尝试readystatechange
document.addEventListener('readystatechange', () => {
if (document.readyState == 'complete') codeAddress();
});
状态为:
正在加载—文档正在加载(代码片段中没有触发) interactive -文档被解析，在DOMContentLoaded之前触发 Complete -在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>
窗口。onload = codeAddress;应该工作-这里是一个演示，和完整的代码:
<！DOCTYPE html > < html > < >头 <标题>测试< /名称> <meta http-equiv=" content - type " content="text/html;utf - 8字符集= " / > < script type = " text / javascript " > 函数codeAddress() { alert('好的'); ｝ 窗口。onload = codeAddress; > < /脚本 > < /头 身体< > 身体< / > < / html >
<！DOCTYPE html > < html > < >头 <标题>测试< /名称> <meta http-equiv=" content - type " content="text/html;utf - 8字符集= " / > < script type = " text / javascript " > 函数codeAddress() { alert('好的'); ｝ > < /脚本 > < /头 <身体onload = " codeAddress ();" > 身体< / > < / html >
通用跨浏览器网页加载器
我写了一个JavaScript页面加载器，可以解决页面加载后加载函数的问题。与其他文章不同的是，这个网页加载器99.9%是跨浏览器兼容的，可以在许多版本的浏览器中工作，无论是旧的还是新的。支持在几乎所有浏览器中加载页面，包括Internet Explorer 3-11、所有Firefox和Chrome浏览器、早期Opera、所有移动浏览器、Netscape 4和6系列等。
它将为给定的浏览器选择最快的页面加载事件或状态检查，并返回一个文本字符串，表明JavaScript可以安全地处理文档对象模型(DOM)。应该可以在许多传统浏览器中工作，但测试。将你的JavaScript函数或库调用放在下面的“Start()”方法中，这样当脚本说网页或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，图像，视频和其他文件仍在加载中。在现代浏览器中，这通常介于“交互”和“完成”的准备状态之间，DOM已构建，但浏览器仍在下载其他资源文件。这允许JavaScript很早就访问并开始操作HTML树或DOM。
较老的浏览器，如Internet Explorer v. 3-8或Netscape，不理解高级DOM检查，因此在调用JavaScript之前需要完全或“完整”加载DOM和所有页面资源。
替代解决方案。我更喜欢这种方式，因为它简洁，代码简单。
(function () {
alert("I am here");
})();
这是一个匿名函数，没有指定名称。 这里所发生的是，函数被定义并一起执行。 将它添加到正文的开头或结尾，这取决于它是在加载页面之前执行还是在加载所有HTML元素之后执行。
推荐文章
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 如何使Bootstrap 4卡在卡列相同的高度?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 使用域集图例引导
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 音频停止功能
- 有Grunt生成index.html不同的设置
- 如何禁用谷歌翻译从HTML在Chrome
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格
- 向HTML表中添加水平滚动条
