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

问题描述 投票:189回答:8

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

<body onload="foo()">

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

还有其他方法可以在加载时调用JavaScript函数吗?我宁愿不使用jQuery,因为我对它不是很熟悉。

javascript onload
8个回答
325
投票

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

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

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


56
投票

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

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

说明:

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

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


34
投票

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

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

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

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

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

另外一个选择是考虑使用一个本质上这样做的JS框架:

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

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

window.onload = yourfunction;

或者使用jQuery,如果你想:

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

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


6
投票

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

5
投票

这是诀窍(无处不在):

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

5
投票

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

0
投票

对于检测加载的html(从服务器)插入到DOM中使用MutationObserver或在数据准备好使用时检测loadContent函数中的时刻

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


// simulate element loading
var 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>
© www.soinside.com 2019 - 2024. All rights reserved.