Question

我有一个看起来像这样的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()">

Answer 1

使用纯javascript：

window.onload = function(){

};

（或

function doLoad() {
    //Do stuff on load
}

window.onload = doLoad;

使用Jquery

$(document).ready(function(){   

});

Answer 2

使用Jquery你可以做这样的事情：

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

等待页面加载然后执行该功能。您只需将其放在外部.js文件中并将其包含在您的页面中。

（对于那些拒绝这个答案的人，因为它是Jquery，他说他不能使用onload（）所以我刚才提到了这个选项。）

Answer 3

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

window.addEventListener("load", showProducts);

Answer 4

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

document.addEventListener("DOMContentLoaded", showProducts);

Answer 5

只需将脚本放在底部：

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

Answer 6

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（）要复杂得多，而且更好。

Answer 7

根据您的标准“HTML中没有脚本”和“没有onload或onclick listener”，您可以将该函数放入一个单独的文件中，并从页面底部的脚本元素运行它：

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

所以现在你没有页面中的脚本而没有监听器。当元素添加到DOM时，代码将被执行，因此只要它在相关的DIV之后，你就没事了。

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

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

7 个答案: