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

145

传统上，调用JavaScript函数，一旦在页面加载，你的onload属性添加到包含一些JavaScript体（通常只有调用函数）：如何在页面加载时调用JavaScript函数？

<body onload="foo()">

当页面加载，我想运行一些JavaScript代码来动态地使用来自服务器的数据填充页面的各个部分。我无法使用onload属性，因为我使用的是JSP片段，它没有我可以添加属性的body元素。

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

来源

2010-10-01 palAlaa

+11

BTW：它的JavaScript; Java是一种语言，Javascript是另一种语言。没有Java脚本这样的事情。 FYI – 2010-10-01 20:00:55

您可以验证凯文对您的问题的编辑是否仍然提出相同的问题，或者为了确保我们理解而重新编写它？（你是否想找到onload的替代方案？） – STW 2010-10-01 20:06:05

256

如果你想利用参数的onload方法，你可以做同样的事情到这一点：

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

这将onload绑定到一个匿名函数，当被调用时，它将使用您提供的任何参数运行您所需的函数。当然，您可以在匿名函数中运行多个函数。

来源

2010-10-01 20:38:46

现在，当我动态地包含服务器生成的页面并需要DOM准备就绪时，我需要完成这个雷区。如果只有某人早些时候鼓励适当的图书馆用户。 – 2010-10-01 21:27:38

我没有说这是个好主意。尽管我工作的主要开发人员有一个强大的案例，但是我还没有能够说服他在几页之外使用jquery。 – 2010-10-01 21:46:06

那么也许你应该换工作。如果这项工作的正确工具不是你正在使用的工具，那么为什么你的头靠在墙上不断地与无能的对抗呢？ – 2010-10-01 22:09:53

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

window.onload = yourfunction;

或者使用jQuery，如果你想：

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

如果你想打电话页面加载多个函数，看看本文的详细信息：

Using Multiple JavaScript Onload Functions

来源

2010-10-01 19:59:05 Sarfraz

这是不正确的，该函数将执行并分配它返回的任何内容。（）不应该在那里。 – epascarello 2010-10-01 20:02:35

如果还有其他函数正在监听onload事件，则会将它们吹走。最好添加一个事件监听器，而不是直接分配一个事件处理器。即使在这种情况下，您也可以将它指定为'window.onload = yourfunction'，而不是函数关闭，而不是您拥有它的方式。你的方式寻求在分配时执行你的function（）。 – Robusto 2010-10-01 20:03:05

，它将函数的返回值分配给window.onload，除非返回值是一个函数，否则这将不起作用。 – 2010-10-01 20:03:12

你原来的曲estion不清楚，假设凯文的编辑/解释是正确的，那么这第一个选项不适

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

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

您也可以将您的JavaScript在最后的身体;在文档完成之前它不会开始执行。

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

而且，另一种选择，就是考虑使用一个JS框架，它本质上做到这一点：

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

来源

2010-10-01 19:59:14 STW

'onload'中的'javascript：'是不必要的，虽然没有害处。 – icktoofay 2013-06-23 00:06:16

@STW''给出'未捕获的ReferenceError：未定义LoadResult' – Gunasegar 2015-11-04 06:15:40

$（document）.ready（function（）{SomeFunction（）;}）; – 2017-01-05 21:36:36

另一种方式做，这是通过使用事件侦听器，在这里你如何使用它们：

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

说明：

DOMContentLoaded这意味着当文档的DOM对象是满载和通过JavaScript看，这也可能是“点击”，“聚焦”...

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

来源

2012-04-28 21:35:44

请注意，这不适用于IE 8及更低版本。否则，这是最好的纯JS解决方案！ – Philipp 2015-05-20 10:57:21

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

尝试下面的代码：

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

来源

2014-02-26 13:59:03

here's the trick (works everywhere):

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

来源

2015-05-20 11:32:49 Abhishek

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

来源

2017-04-03 08:49:09 anonymous

描述你回答这只是一个代码 – IsuruAb 2017-04-03 16:01:09

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

回答

相关问题