Fatal编程技术网
  • javascript/
  • Javascript 如何在JS中调用页面加载函数？

Javascript 如何在JS中调用页面加载函数？

javascript

Javascript 如何在JS中调用页面加载函数？,javascript,onload,Javascript,Onload,我有一个js函数，看起来像这样 function showProducts(){ document.getElementById("shopList").innerHTML = "<ul><li>Test Text</li></ul>"; } 但是我如何调用函数来显示div中的文本呢？当我使用它作为我的body标记时，它是有效的，但我不允许在html中编写任何js代码，也不允许使用onload或onclick。我试着和听众一起做了将近

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

 function showProducts(){
    document.getElementById("shopList").innerHTML = "<ul><li>Test Text</li></ul>";
 }
但是我如何调用函数来显示div中的文本呢？当我使用它作为我的body标记时，它是有效的，但我不允许在html中编写任何js代码，也不允许使用onload或onclick。我试着和听众一起做了将近4个小时，但仍然没有找到解决办法。有人能帮我吗

     <body onload="showProducts()">
使用Jquery，您可以执行以下操作：

$(document).ready(function(){   
   showProducts();
});
它等待页面加载，然后执行函数。 您只需将其放在一个外部.js文件中，并将其包含在页面中

对于那些因为是Jquery而否决这个答案的人，他说他不能使用onload，所以我刚才提到了这个选项

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

$(document).ready(function(){   
   showProducts();
});
它等待页面加载，然后执行函数。 您只需将其放在一个外部.js文件中，并将其包含在页面中

对于那些因为是Jquery而否决这个答案的人，他说他不能使用onload，所以我刚才提到了这个选项

使用纯javascript：

window.onload = function(){

};
或

使用Jquery

$(document).ready(function(){   

});
使用纯javascript：

window.onload = function(){

};
或

使用Jquery

$(document).ready(function(){   

});
实际上，分配给onload只是对侦听器进行操作的简写。虽然我还没有测试过，但它应该可以工作

window.addEventListener("load", showProducts);
实际上，分配给onload只是对侦听器进行操作的简写。虽然我还没有测试过，但它应该可以工作

window.addEventListener("load", showProducts);
对听众来说并不难。以下是一个不跨浏览器的解决方案：

document.addEventListener("DOMContentLoaded", showProducts);
对听众来说并不难。以下是一个不跨浏览器的解决方案：

document.addEventListener("DOMContentLoaded", showProducts);
John Resig的简化版来自Pro JavaScript技术。这要看情况而定

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在大多数情况下都要复杂得多，而且更好。

John Resig使用Pro JavaScript技术的简化版本。这要看情况而定

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之后，就可以了

顺便说一句，您甚至不需要函数，只需将函数体中的语句放入文件。

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

<script type="text/javascript" src="showproducts.js"></script>
因此，现在页面中没有脚本，也没有侦听器。代码将在元素添加到DOM时执行，因此只要它位于相关DIV之后，就可以了

顺便说一句，您甚至不需要函数，只需将函数体中的语句放入文件。

只需将脚本放在底部：

<body>
    ...
    <script type="text/javascript">
        myFunction();
    </script>
</body>
只需将脚本放在底部：

<body>
    ...
    <script type="text/javascript">
        myFunction();
    </script>
</body>
我更喜欢使用jquery。。更简单。如果你不能在html中编写JS，这是否意味着你的JS包含在一个外部文件中？如果您将包含JS的元素放在外部文件或内联的正文底部，那么您可以直接调用showProducts，而不需要任何事件处理程序，因为在它运行时，您的div元素已经被解析，因此可以从JS访问。或者你的问题真的是我该如何使用.addEventListener？我更喜欢使用jquery。。更简单。如果你不能在html中编写JS，这是否意味着你的JS包含在一个外部文件中？如果您将包含JS的元素放在外部文件或内联的正文底部，那么您可以直接调用showProducts，而不需要任何事件处理程序，因为在它运行时，您的div元素已经被解析，因此可以从JS访问。或者你的问题真的是我该如何使用.addEventListener？如果你不知道如何使用JQuery，你必须将它作为javascript文件包含到你的页面中。以下是教程：嗨，glenn，一般来说，对于没有标记jQuery的问题，我们尽量不只给出jQuery的答案。虽然我们都喜欢jQuery，但在某些情况下，我们就是不能使用它，例如，在处理JavaScript作业时，不允许使用库。话虽如此，我认为您可以将jQuery显示为旁白，而不是主要答案。祝你好运我完全理解，但是我给了jquery选项，因为他不能使用window.onload.Sure，我理解。如果可以，试着看看是否可以找到一个纯JavaScript解决方案。您可以随时编辑您的答案以改进它。祝你好运：阅读OP：不允许在我的html中编写任何js代码，也不允许使用onload或onclick。这是家庭作业，不需要加载4000行libra
我很高兴能做这么简单的事。调用函数的代码几乎比函数本身大。如果您不知道如何使用JQuery，则必须将其作为javascript文件包含到页面中。以下是教程：嗨，glenn，一般来说，对于没有标记jQuery的问题，我们尽量不只给出jQuery的答案。虽然我们都喜欢jQuery，但在某些情况下，我们就是不能使用它，例如，在处理JavaScript作业时，不允许使用库。话虽如此，我认为您可以将jQuery显示为旁白，而不是主要答案。祝你好运我完全理解，但是我给了jquery选项，因为他不能使用window.onload.Sure，我理解。如果可以，试着看看是否可以找到一个纯JavaScript解决方案。您可以随时编辑您的答案以改进它。祝你好运：阅读OP：不允许在我的html中编写任何js代码，也不允许使用onload或onclick。这是家庭作业，不需要加载4000行库来完成如此简单的工作。调用函数的代码几乎比函数本身大。OP表示不允许onload。OP表示不允许onload。当您使用showProducts时，实际上是在调用函数。addEventListener需要的是函数引用，而不是它的返回值。我认为标准事件名称“load”应该可以跨浏览器工作。我也更喜欢将侦听器附加到窗口而不是文档，但我认为这在实践中并不重要。@MarkReed，我相信它们不一样。DOMContentLoaded在加载窗口之前触发。后者也会导致图像、js和css等资产的加载。@bfavaretto:对，但正如您所说，DOMContentLoaded不是跨浏览器的。而load应该在addEventListener存在的任何地方工作。因此，虽然语义有些不同，但正如我所说，load应该可以跨浏览器工作@马克，你说得对，加载应该在任何地方都能工作，但addEventListener不行。当您使用showProducts时，实际上是在调用函数。addEventListener需要的是函数引用，而不是它的返回值。我认为标准事件名称“load”应该可以跨浏览器工作。我也更喜欢将侦听器附加到窗口而不是文档，但我认为这在实践中并不重要。@MarkReed，我相信它们不一样。DOMContentLoaded在加载窗口之前触发。后者也会导致图像、js和css等资产的加载。@bfavaretto:对，但正如您所说，DOMContentLoaded不是跨浏览器的。而load应该在addEventListener存在的任何地方工作。因此，虽然语义有些不同，但正如我所说，load应该可以跨浏览器工作@马克，你说得对，加载应该在任何地方都能工作，但addEventListener不行。IE将函数分配给window.onload是一个侦听器。是，但不是显式分配。这就是我所说的速记-区别纯粹是语法上的，而实际上是相同的事情。将函数分配给window.onload是一个侦听器。是的，但不是显式的。这就是我所说的速记的意思——区别纯粹是句法上的，而完全相同的事情是在封面下进行的。