页面加载后如何运行函数？

246

我想在页面加载时运行一个函数，但是我不想在<body>标记中使用它。

我有一个脚本，如果在中将其初始化，它将运行<body>，如下所示：

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

但是我想在没有的情况下运行它，<body onload="codeAddress()">并且我尝试了很多事情，例如：

window.onload = codeAddress;

但这是行不通的。

那么如何在页面加载后运行它？

javascript html onload

— 克莱斯·古斯塔夫森
source

您是否window.onload = codeAddress在codeAddress()定义之后运行？如果是这样，这应该起作用。您确定其他地方没有错误吗？

— Skilldrick 2011年

这没有任何意义。window.onload在页面加载后运行，并且所有javascript都可用，因此可以在页面或链接的js文件中的任何位置声明codeAddress（）函数。除非在页面加载本身期间调用了它，否则它不必先出现。

— 贾里德·法瑞希

@Jared是的。看看jsfiddle.net/HZHmc。没用但是，如果将window.onload移到以下定义之后：jsfiddle.net/HZHmc/1，它将起作用。

— Skilldrick 2011年

通常将函数声明提升到作用域的顶部，因此可以在可访问范围中的任何位置声明该函数。

— Russ Cam

4

所有流行的浏览器都可以显示javascript错误-您得到了吗？

— Christoph

354

window.onload = codeAddress;应该可以工作- 这是一个demo，以及完整的代码：

<!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>

展开摘要

— 达林·迪米特洛夫（Darin Dimitrov）
source

3

正如我在回答中所说的那样，所看到的代码没有任何问题-它无法正常工作的原因一定是JS某个地方出现了错误。

— Skilldrick 2011年

如果将带文字的段落放在正文中，则只有单击确定后，该段落才会加载。

— FluorescentGreen

此全局事件处理程序仅在Chrome中可用。 developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/...

— Devappended

177

自从jQuery发行以来，本机JavaScript不再使用jQuery或window.onload，而是采用了一些很棒的功能。现在，所有现代浏览器都具有自己的DOM ready函数，而无需使用jQuery库。

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

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

— 斯宾塞·梅
source

4

（菜鸟问题：怎么false办？）

— 2015年

7

@ᔕᖺᘎᕊ代表'bubbles'属性（您不必包括它，我只是为了好习惯而填写所有布尔值）。对于'cancelable'属性，还有另一个布尔语句，但是它不是很有用，因为上述语句已经不可取消。在此处了解更多信息：developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— Spencer

1

这就是我现在要寻找的内容：)在DOM完成后执行，因此您可以对其进行操作，而不是在浏览器显示“页面已完全加载”时执行，这可能需要几秒钟的时间，具体取决于外部内容（例如广告）

— Nathanyel

菜鸟问题，如果您不知道页面是否已加载怎么办？编辑：啊：document.readyState

— 布赖恩·汉内

1

“ @ x-yuri”当文档完全加载和解析后，无需等待样式表，图像和子帧完成加载，就会触发DOMContentLoaded事件（可以使用load事件来检测已完全加载的页面）。- stackoverflow.com/questions/2414750/...

— 斯宾塞月

46

以达林的答案，但jQuery的风格。（我知道用户要求使用JavaScript）。

小提琴

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

— 在乔斯吃饭
source

4

您的答案教了我分配，但不是关于jQuery / javascript的。

— unicorn2 2015年

2

@VijayKumar这是jQuery，而不是本机Javascript，因此您需要包含一个jQuery库才能正常工作

— Spencer

30

替代解决方案。为了简洁和简化代码，我更喜欢这样做。

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

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

— 哈比卜
source

1

这是与GitHub的HTML Preview一起使用的唯一代码：htmlpreview.github.io 其他代码，虽然正确，但已被此HTML Preview破坏了。

— 詹森·杜塞特

1

有人可以解释这与将脚本标签放在HTML页面末尾和匿名函数的用途有何不同？

— Pat-Laugh

10

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

希望这可以帮助：）

— 将
source

感谢您提供有关onload用法的更多见解

— CybeX

4

尝试readystatechange

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

状态在哪里：

loading-文档正在加载（摘要中未触发）
交互式的 -文档在解析之前触发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>

展开摘要

— 卡米尔（KamilKiełczewski）
source

3

看一下domReady脚本，该脚本允许设置在加载DOM后执行的多个功能。这基本上是Dom ready在许多流行的JavaScript库中所做的工作，但是它是轻量级的，可以在外部脚本文件的开头进行添加。

用法示例

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

function codeAddress() {

}

domReady(codeAddress);

— 拉斯·卡姆
source

0

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

展开摘要

— 鲁德拉
source