如何在 JS 中的页面加载时调用函数

How to call function on page load in JS?

本文关键字：加载 调用 函数 JS      更新时间：2023-09-26

我有一个看起来像这样的js函数 

 function showProducts(){
    document.getElementById("shopList").innerHTML = "<ul><li>Test Text</li></ul>";
 }

这是一个必须显示我的一系列产品的功能。我已经在我的 html 页面中制作了一个带有id="shopList"的div

        <div id="shopList">
        </div>

但是如何调用函数来显示div 中的文本呢？当我使用它作为我的身体标签时，它可以工作，但我不允许在我的 html 中编写任何 js 代码或使用 onload 或 onclick。我尝试与听众一起做将近 4 个小时，但我仍然没有找到解决方案。有人可以帮助我吗？

     <body onload="showProducts()">

使用纯 JavaScript：

window.onload = function(){
};

（或

function doLoad() {
    //Do stuff on load
}
window.onload = doLoad;

使用Jquery

$(document).ready(function(){   
});

这对听众来说并不难。这是一个解决方案（不是跨浏览器）：

document.addEventListener("DOMContentLoaded", showProducts);

实际上，分配给onload只是与听众一起做的简写。 这应该有效，尽管我还没有测试过。

window.addEventListener("load", showProducts);

使用 Jquery，您可以执行以下操作： 

$(document).ready(function(){   
   showProducts();
});

它一直等到页面加载完毕，然后执行函数。您只需将其放在外部.js文件中，然后将其包含在您的页面中即可。

（

对于因为是Jquery而对这个答案投反对票的人，他说他不能使用onload（），所以我只是提到了这个选项。

只需将脚本放在底部：

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

John Resig的简化版本，来自"Pro JavaScript Techniques"。这取决于addEvent。

var ready = ( function () {
  function ready( f ) {
  if( ready.done ) return f();
  if( ready.timer ) {
    ready.ready.push(f);
  } else {
    addEvent( window, "load", isDOMReady );
    ready.ready = [ f ];
    ready.timer = setInterval(isDOMReady, 13);
  }
};
function isDOMReady() {
   if( ready.done ) return false;
   if( document && document.getElementsByTagName && document.getElementById && document.body ) {
     clearInterval( ready.timer );
     ready.timer = null;
     for( var i = 0; i < ready.ready.length; i++ ) {
       ready.ready[i]();
     }
     ready.ready = null;
     ready.done = true;
   }
}
  return ready;
})();

window.onload可以工作，但它是一个不同的野兽。 jQuery的$（document）.ready（）在大多数情况下要复杂得多，也更好。

给定"HTML 中没有脚本"和"没有 onload 或 onclick 侦听器"的标准，您可以将函数放入单独的文件中，并从页面底部的脚本元素运行它：

<script type="text/javascript" src="showproducts.js"></script>

所以现在页面中没有脚本，也没有侦听器。当元素添加到 DOM 时，代码将执行，所以只要它在相关的 DIV 之后，你就没问题。

顺便说一下，你甚至不需要函数，你可以将函数体中的语句放入文件中。

相关文章：