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

pgx2nnw8 于 2023-09-29 发布在 Java

关注(0)|答案(9)|浏览(162)

传统上，要在页面加载后调用JavaScript函数，需要向包含一点JavaScript的主体添加onload属性（通常只调用函数）

<body onload="foo()">

页面加载后，我想运行一些JavaScript代码，用来自服务器的数据动态填充页面的各个部分。我不能使用onload属性，因为我使用的是JSP片段，它没有可以添加属性的body元素。
有没有其他方法可以在加载时调用JavaScript函数？我不想使用jQuery，因为我对它不太熟悉。

JavaScript

来源：https://stackoverflow.com/questions/3842614/how-do-i-call-a-javascript-function-on-page-load

9条答案

按热度按时间

axr492tv1#

如果你想让onload方法接受参数，你可以做一些类似的事情：

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

这将onload绑定到一个匿名函数，当被调用时，它将运行你想要的函数，无论你给予它什么参数。当然，你可以在匿名函数中运行多个函数。

赞(0）回复(0）举报 2023-09-29

rn0zuynd2#

另一种方法是使用事件侦听器，以下是如何使用它们：

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

说明：

DOMContentLoaded表示文档的DOM对象被JavaScript完全加载并看到。也可能是“点击”，“聚焦”...
**function（）**匿名函数，事件发生时调用。

赞(0）回复(0）举报 2023-09-29

ajsxfq5m3#

您最初的问题不清楚，假设Kevin的编辑/解释是正确的，那么第一个选项不适用

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

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

你也可以把JavaScript放在代码体的最后;它不会开始执行，直到文档完成。

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

另一种选择是使用JS框架，它本质上是这样做的：

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

赞(0）回复(0）举报 2023-09-29

kuarbcqp4#

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

window.onload = yourfunction;

或者使用jQuery：

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

如果你想在页面加载时调用多个函数，请查看这篇文章以获取更多信息：

Using Multiple JavaScript Onload Functions

赞(0）回复(0）举报 2023-09-29

gev0vcfq5#

<!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）回复(0）举报 2023-09-29

mm5n2pyu6#

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

赞(0）回复(0）举报 2023-09-29

ggazkfy87#

这是一个技巧（在任何地方都有效）：

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

赞(0）回复(0）举报 2023-09-29

7d7tgy0s8#

对于检测插入到DOM中的加载的html（来自服务器），使用MutationObserver或检测数据准备使用时的loadContent函数中的时刻

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


// TEST: simulate element loading
let 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');