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

IT技术 javascript onload
2021-01-11 14:16:46

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

<body onload="foo()">

页面加载后,我想运行一些 JavaScript 代码,以使用来自服务器的数据动态填充页面的某些部分。我无法使用该onload属性,因为我使用的是 JSP 片段,这些片段没有body可以添加属性的元素。

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

6个回答

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

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

这将 onload 绑定到一个匿名函数,当调用该函数时,将使用您提供的任何参数运行您想要的函数。而且,当然,您可以从匿名函数内部运行多个函数。

那么也许你应该换工作。如果适合工作的工具不是您正在使用的工具,为什么要不断地与不称职的人作斗争呢?
2021-03-11 14:16:46
我没说这是个好主意。虽然我工作的首席开发人员有一个强烈的 Not Invented Here 综合征案例,但我无法说服他在几页之外使用 jquery。
2021-03-14 14:16:46
现在,当我动态地包含服务器生成的页面并需要 DOM 就绪时,我需要解决这个雷区。要是有人早点就适当地鼓励图书馆用户就好了。
2021-03-24 14:16:46
我可以使用按钮上的 onclick 事件第二次调用相同的 yourfunction 吗?
2021-04-05 14:16:46
如果另一个脚本已经在 window.onload 上加载了一个函数,这个方法将覆盖它。在某些情况下,这可能是一个问题。document.addEventListener 方法对我来说似乎更可取。
2021-04-07 14:16:46

另一种方法是使用事件侦听器,以下是它们的使用方法:

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

解释:

DOMContentLoaded表示文档的 DOM 对象完全加载并被 JavaScript 看到的时间。这也可能是“点击”,“焦点”......

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

请注意,这在 IE 8 及更低版本中不起作用。否则这是最好的纯JS解决方案!
2021-03-11 14:16:46

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

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

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

你也可以把你的 JavaScript 放在 body 的最后;在文档完成之前它不会开始执行。

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

另一种选择是使用本质上执行此操作的 JS 框架:

// jQuery
$(document).ready( function () {
  SomeFunction();
});
@STW <script type="text/javascript">LoadResult();</script>Uncaught ReferenceError: LoadResult is not defined
2021-03-31 14:16:46
我在哪里写内容SomeFunction()
2021-04-01 14:16:46
javascript:inonload是不必要的,尽管无害。
2021-04-03 14:16:46
function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

或者如果需要,可以使用 jQuery:

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

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

如果有其他函数正在侦听 onload 事件,这会将它们吹走。最好添加事件侦听器而不是直接分配事件处理程序。即使在这种情况下,您也可以将它指定为“window.onload = yourfunction”而没有函数闭包,而不是您拥有它的方式。您的方式寻求在分配时执行 yourfunction() 。
2021-03-22 14:16:46
这会将函数的返回值分配给 window.onload,这将不起作用,除非返回值是一个函数。
2021-03-23 14:16:46
window.onload = 你的函数;这种方式的问题是它不接受功能参数!!
2021-04-05 14:16:46
这是不正确的,该函数将执行并将返回的任何内容分配给 onload。() 不应该在那里。
2021-04-06 14:16:46
@epascarello:很好的捕获,已修复,您在编写函数名称时会看到一个习惯。谢谢
2021-04-07 14:16:46

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

我认为他的回答很清楚,因为你可以看到脚本被放在 head 标签中,从而允许它在正文内容之前执行..或者让我们说预加载它的功能或其他什么..完全不知道,但从来没有人会用勺子喂你,这个社区中的任何人也不会,你必须自己多查查一些东西。#special_that_you're_a_web_developer
2021-03-24 14:16:46