Question

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

<body onload="foo()">

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

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

Answer 1

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

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

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

Answer 2

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

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

说明：

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

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

Answer 3

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

window.onload = yourfunction;

或者如果你想使用jQuery：

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

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

Using Multiple JavaScript Onload Functions

Answer 4

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

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

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

您还可以将javascript放在正文的最末端;在文档完成之前，它不会开始执行。

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

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

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

Answer 5

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

Answer 6

这是诀窍（无处不在）：

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

Answer 7

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

Answer 8

要检测插入到DOM中（从服务器获取的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>

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

8 个答案: