我想在加载页面时运行一个函数,但我不想在<body>标记中使用它。
我有一个脚本,如果我在<body>中初始化它,就会运行,像这样:
function codeAddress() {
// code
}
<body onLoad="codeAddress()">
但我想运行它没有<body onload="codeAddress()“>和我尝试了很多东西,例如:
window.onload = codeAddress;
但这并不奏效。
那么,当页面加载时,我如何运行它呢?
尝试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 >