如何在页面加载时调用 JavaScript 函数？
Posted
技术标签:
【中文标题】如何在页面加载时调用 JavaScript 函数？【英文标题】：How do I call a JavaScript function on page load? 【发布时间】：2011-04-20 01:08:59 【问题描述】：传统上，要在页面加载后调用 javascript 函数，您需要在包含一些 JavaScript 的正文中添加一个 onload 属性（通常只调用一个函数）
<body onload="foo()">
当页面加载完毕后，我想运行一些 JavaScript 代码来动态地使用来自服务器的数据填充页面的某些部分。我无法使用 onload 属性，因为我使用的是 JSP 片段，其中没有可以添加属性的 body 元素。
还有其他方法可以在加载时调用 JavaScript 函数吗？我宁愿不使用 jQuery，因为我对它不是很熟悉。
【问题讨论】：
您能否验证凯文对您问题的编辑是否仍然在问同一个问题，或者改写它以确保我们理解？ （您是否正在寻找替代 onload 的方法？） 这能回答你的问题吗？ How to make JavaScript execute after page load? 【参考方案1】：如果你想让onload方法带参数，你可以做类似这样的事情：
window.onload = function()
yourFunction(param1, param2);
;
这会将 onload 绑定到一个匿名函数，当调用该函数时，它将运行您想要的函数，并使用您提供的任何参数。当然，您可以在匿名函数内部运行多个函数。
【讨论】：
现在，当我动态地包含服务器生成的页面并需要 DOM 准备就绪时，我需要克服这个雷区。要是有人早点鼓励图书馆用户就好了。 我没说这是个好主意。虽然我工作的主要开发人员有一个强烈的 Not Invented Here 综合症案例，但我无法说服他使用 jquery，除了几页。 那么也许你应该换工作。如果适合工作的工具不是您正在使用的工具，为什么还要不断地与无能的人作斗争？ 我可以使用按钮上的 onclick 事件第二次调用相同的 yourfunction 吗？ 如果另一个脚本已经在 window.onload 上加载了一个函数，这个方法将覆盖它。在某些情况下，这可能是一个问题。 document.addEventListener 方法对我来说似乎更可取。【参考方案2】：另一种方法是使用事件侦听器，以下是您使用它们的方法：
document.addEventListener("DOMContentLoaded", function()
your_function(...);
);
解释：
DOMContentLoaded 表示文档的 DOM 对象完全加载并被 JavaScript 看到时。这也可能是“点击”、“焦点”...
function() 匿名函数，当事件发生时会被调用。
【讨论】：
请注意，这在 IE 8 及更低版本中不起作用。否则这是最好的纯 JS 解决方案！【参考方案3】：您最初的问题不清楚，假设凯文的编辑/解释是正确的，那么第一个选项不适用
典型的选项是使用onload 事件：
<body onload="javascript:SomeFunction()">
....
您也可以将 JavaScript 放在正文的最后；在文档完成之前它不会开始执行。
<body>
...
<script type="text/javascript">
SomeFunction();
</script>
</body>
另一种选择是使用本质上执行此操作的 JS 框架：
// jQuery
$(document).ready( function ()
SomeFunction();
);
【讨论】：
onload 中的javascript: 是不必要的，尽管没有害处。
@STW <script type="text/javascript">LoadResult();</script> 给Uncaught ReferenceError: LoadResult is not defined
SomeFunction()的内容在哪里写？【参考方案4】：
function yourfunction() /* do stuff on page load */
window.onload = yourfunction;
如果需要，也可以使用 jQuery：
$(function()
yourfunction();
);
如果您想在页面加载时调用多个函数，请查看这篇文章了解更多信息：
Using Multiple JavaScript Onload Functions【讨论】：
这是不正确的，该函数将执行并将返回的任何内容分配给 onload。 () 不应该在那里。 如果有其他函数正在监听 onload 事件，这将把它们吹走。最好添加事件侦听器而不是直接分配事件处理程序。即使在这种情况下，您也可以在没有函数闭包的情况下将其分配为 `window.onload = yourfunction'，而不是您拥有它的方式。您的方式是在分配时执行 yourfunction()。 这会将函数的返回值赋给window.onload，除非返回值是一个函数，否则这将不起作用。 @epascarello：很好，已修复，您在编写函数名称时会看到一种习惯。谢谢 window.onload = yourfunction;这种方式的问题是它不接受功能参数！【参考方案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>【讨论】：
我认为他的答案很明确，因为您可以看到脚本被放在 head 标签中，因此可以在正文内容之前执行它..或者让我们说预加载它的功能或其他什么..有时一个人问问题是因为他根本不知道，但从来没有人会用勺子喂你，这个社区的任何人都不会，你必须自己多查一些东西。 #special_that_you're_a_web_developer【参考方案6】：您必须调用要在加载时调用的函数（即加载文档/页面）。 例如，在文档或页面加载时要加载的函数称为“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>
【讨论】：
【参考方案7】：这是诀窍（无处不在）：
r(function()
alert('DOM Ready!');
);
function r(f)/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()
【讨论】：
呃。我认为这不是代码混淆竞赛。 @abhishek 你能解释一下你的代码是做什么的吗？不清楚，因此没用。【参考方案8】：要检测插入 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');<div id="content"><div>【讨论】：
以上是关于如何在页面加载时调用 JavaScript 函数？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 AMX 页面加载时调用 Javascript 函数？