1

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

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

这是一个必须显示我的产品数组的功能。我id="shopList"在我的 html 页面中创建了一个 div

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

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

     <body onload="showProducts()">
4

7 回答 7

6

使用纯 JavaScript：

window.onload = function(){

};

（或者

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

window.onload = doLoad;

使用 jQuery

$(document).ready(function(){   

});
于 2012-05-15T01:44:29.290 回答
1

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

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

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

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

于 2012-05-15T01:41:35.873 回答
1

Really, assigning to onload is just shorthand for doing it with listeners. This should work , though I haven't tested it.

window.addEventListener("load", showProducts);
于 2012-05-15T01:48:56.733 回答
1

It's not difficult with listeners. Here is a solution (not cross-browser):

document.addEventListener("DOMContentLoaded", showProducts);
于 2012-05-15T01:49:31.893 回答
1

只需将脚本放在底部：

<body>
    ...
    <script type="text/javascript">
        myFunction();
    </script>
</body>
于 2012-05-15T04:13:08.283 回答
0

John Resig's simplified version from "Pro JavaScript Techniques". It depends on 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 would work, but it is a different beast. jQuery's $(document).ready() is much more complex and better in most scenarios.

于 2012-05-15T01:51:25.050 回答
0

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

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

所以现在页面中没有脚本，也没有听众。该代码将在元素添加到 DOM 时执行，因此只要在相关 DIV 之后即可。

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

于 2012-05-15T02:49:18.013 回答