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

pgx2nnw8  于 2023-09-29  发布在  Java
关注(0)|答案(9)|浏览(199)

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

  1. <body onload="foo()">

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

axr492tv

axr492tv1#

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

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

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

rn0zuynd

rn0zuynd2#

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

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

说明:

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

ajsxfq5m

ajsxfq5m3#

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

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

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

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

  1. <body>
  2. ...
  3. <script type="text/javascript">
  4. SomeFunction();
  5. </script>
  6. </body>

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

  1. // jQuery
  2. $(document).ready( function () {
  3. SomeFunction();
  4. });
展开查看全部
kuarbcqp

kuarbcqp4#

  1. function yourfunction() { /* do stuff on page load */ }
  2. window.onload = yourfunction;

或者使用jQuery:

  1. $(function(){
  2. yourfunction();
  3. });

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

gev0vcfq

gev0vcfq5#

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Test</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <script type="text/javascript">
  7. function codeAddress() {
  8. alert('ok');
  9. }
  10. window.onload = codeAddress;
  11. </script>
  12. </head>
  13. <body>
  14. </body>
  15. </html>
mm5n2pyu

mm5n2pyu6#

你必须调用你希望在加载时被调用的函数(即,加载文档/页面)。例如,在加载文档或页面时要加载的函数称为“yourFunction”。这可以通过在文档的加载事件上调用函数来完成。请查看下面的代码以了解更多详细信息。
试试下面的代码:

  1. <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function () {
  4. yourFunction();
  5. });
  6. function yourFunction(){
  7. //some code
  8. }
  9. </script>
ggazkfy8

ggazkfy87#

这是一个技巧(在任何地方都有效):

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

7d7tgy0s8#

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

  1. let ignoreFirstChange = 0;
  2. let observer = (new MutationObserver((m, ob)=>
  3. {
  4. if(ignoreFirstChange++ > 0) console.log('Element added on', new Date());
  5. }
  6. )).observe(content, {childList: true, subtree:true });
  7. // TEST: simulate element loading
  8. let tmp=1;
  9. function loadContent(name) {
  10. setTimeout(()=>{
  11. console.log(`Element ${name} loaded`)
  12. content.innerHTML += `<div>My name is ${name}</div>`;
  13. },1500*tmp++)
  14. };
  15. loadContent('Senna');
  16. loadContent('Anna');
  17. loadContent('John');
  1. <div id="content"><div>
展开查看全部
qgzx9mmu

qgzx9mmu9#

下面是一个使用es6但没有使用jQuery示例:

  1. window.onload = () => {
  2. foo()
  3. }

参见mdn文档:https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

相关问题