如何在页面加载时调用JavaScript函数？

244

传统上，要在页面加载后调用JavaScript函数，您onload需要在包含一些JavaScript的正文中添加一个属性（通常只调用一个函数）

<body onload="foo()">

页面加载后，我想运行一些JavaScript代码以使用服务器中的数据动态填充页面的某些部分。onload因为我使用的是JSP片段，所以我无法使用该属性，而JSP片段没有body可以添加属性的元素。

还有其他方法可以在加载时调用JavaScript函数吗？我宁愿不使用jQuery，因为我不太熟悉它。

javascript onload

— palAlaa
source

15

顺便说一句：这是Javascript；Java是一种语言，而Javascript是另一种语言。没有Java脚本之类的东西。FYI

— Yanick罗歇

您可以验证Kevin对您的问题的编辑是否仍在询问同一问题，或者重新措辞以确保我们理解？（您是否要寻找onload的替代方法？）

— STW 2010年

388

如果希望onload方法采用参数，则可以执行以下操作：

window.onload = function() {
  yourFunction(param1, param2);
};

这会将onload绑定到一个匿名函数，该匿名函数在调用时将使用您提供的任何参数运行所需的函数。而且，当然，您可以从匿名函数内部运行多个函数。

— 马特·西克
source

现在，当我动态地包含服务器生成的页面并且需要DOM就绪时，我需要遍历此雷区。如果只有某人早些时候会适当地鼓励图书馆用户。

— Stefan Kendall

4

我没有说这是个好主意。尽管我工作的主要开发人员在“ Not Invented Here”综合症中有很强的案例，但在几页之外，我一直无法说服他使用jquery。

— Matt Sieker

2

然后，也许您应该切换工作。如果合适的工具不是您正在使用的工具，那为什么还要不断地与无能为力的斗争来应对呢？

— Stefan Kendall

我可以使用按钮上的onclick事件第二次调用相同的yourfunction吗？

— 赞2014年

73

另一种方法是使用事件侦听器，这里是如何使用它们：

document.addEventListener("DOMContentLoaded", function() {
  you_function(...);
});

说明：

DOMContentLoaded这意味着当文档的DOM对象完全加载并被JavaScript看到时，这也可能是“单击”，“焦点” ...

function（）匿名函数，将在事件发生时被调用。

— 艾哈迈德·乔拉尼（Ahmed Jolani）
source

5

请注意，这在IE 8及更低版本中不起作用。否则，这是最好的纯JS解决方案！

— 菲利普

46

您最初的问题尚不清楚，假设Kevin的编辑/解释正确，则第一个选项不适用

典型的选项是使用onload事件：

<body onload="javascript:SomeFunction()">
....

您也可以将javascript放在正文的最后；在文档完成之前，它不会开始执行。

<body>
  ...
  <script type="text/javascript">
    SomeFunction();
  </script>
</body>

并且，另一个选择是考虑使用本质上是这样做的JS框架：

// jQuery
$(document).ready( function () {
  SomeFunction();
});

— STW
source

该javascript:中onload是不必要的，虽然不会对人体有害。

— icktoofay

@STW <script type="text/javascript">LoadResult();</script>给Uncaught ReferenceError: LoadResult is not defined

— Gunasegar

37

function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

或使用jQuery（如果需要）：

$(function(){
   yourfunction();
});

如果要在页面加载时调用多个函数，请查看本文以获取更多信息：

使用多个JavaScript加载功能

— 萨夫拉兹
source

3

这是不正确的，该函数将执行并分配返回onload的所有内容。（）不应该在那里。

— epascarello

1

如果还有其他函数正在监听onload事件，则会将其吹走。最好添加一个事件侦听器，而不是直接分配一个事件处理程序。即使在这种情况下，您也可以将其分配为“ window.onload = yourfunction”，而无需关闭函数，而不是使用它的方式。您的方式试图在分配时执行yourfunction（）。

— Robusto 2010年

该函数会将函数的返回值分配给window.onload，除非返回值是一个函数，否则该函数将不起作用。

— I.devries 2010年

@epascarello：很好，已解决，在编写函数名称时会看到一种习惯。谢谢

— Sarfraz 2010年

1

window.onload =您的功能；这种方法的问题是它不接受功能参数！

— palAlaa

8

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

展开摘要

— 匿名
source

3

我认为他的答案很明确，因为您可以看到脚本放在head标记中，因此可以在正文内容之前执行该脚本。或者可以说是预加载其功能等。有时一个人问问题是因为他不这样做一点都不知道，但是从来没有有人会用勺子喂你，或者这个社区中的任何人都不会，你必须自己多找点东西。＃especially_that_you're_a_web_developer

— M03 '18

8

您必须调用要在加载时调用的函数（即，文档/页面的加载）。例如，要在文档或页面加载时加载的函数称为“ yourFunction”。这可以通过在文档的load事件上调用函数来完成。请参阅下面的代码以获取更多详细信息。

请尝试以下代码：

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        yourFunction();
    });
    function yourFunction(){
      //some code
    }
</script>

— 阿米尔·阿德鲁兹曼（Amir Md Amiruzzaman）
source

6

这是窍门（无处不在）：

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

— 阿比舍克
source

1

MutationObserver当数据准备好使用时，用于检测插入到DOM中的（从服务器中）加载的html（从服务器）使用或检测loadContent函数中的时刻

显示代码段

let ignoreFirstChange = 0;
let observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirstChange++ > 0) console.log('Element added on', new Date());
}
)).observe(content, {childList: true, subtree:true });


// TEST: simulate element loading
let tmp=1;
function loadContent(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadContent('Senna');
loadContent('Anna');
loadContent('John');

<div id="content"><div>

展开摘要

— 卡米尔（KamilKiełczewski）
source