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

传统上,在页面加载完成后调用一个JavaScript函数,你可以在包含一些JavaScript的主体(通常只调用一个函数)上添加一个onload属性:

 <body onload="foo()"> 

当页面加载时,我想运行一些JavaScript代码来dynamic地使用来自服务器的数据填充页面的一部分。 我不能使用onload属性,因为我正在使用JSP片段,它没有我可以添加属性的body元素。

有没有其他的方式来调用加载的JavaScript函数? 我宁愿不使用jQuery,因为我不是很熟悉它。

如果你想使用onload方法来获取参数,你可以做类似如下的事情:

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

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

另一种方法是使用事件监听器,在这里如何使用它们:

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

说明:

DOMContentLoaded这意味着当文档的DOM对象被JavaScript完全加载和查看时,也可能是“点击”,“焦点”…

函数()匿名函数将在事件发生时被调用。

 function yourfunction() { /* do stuff on page load */ } window.onload = yourfunction; 

或者如果你想要使用jQuery:

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

如果您想在页面加载中调用多个函数,请参阅本文以获取更多信息:

  • 使用多个JavaScript Onload函数

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

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

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

你也可以把你的JavaScript放在主体的最后面; 它将不会开始执行,直到文档完成。

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

而另一种select是考虑使用一个JS框架,它本质上是这样做的:

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

这里的诀窍(无处不在):

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

您必须调用您想要在加载时调用的函数(即加载文档/页面)。 例如,文档或页面加载时要加载的函数称为“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> 
 <!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>