如何在页面加载时调用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>