window.onload works fine with aspx page, but not in regular html

StackOverflow https://stackoverflow.com/questions/12255043

Pregunta

Could someone please explain to me why window.onload works fine in aspx, but not in xhtml?

This window.onload example works fine in aspx:

<script type="text/javascript">
    //<![CDATA[
      //handles the collapse of submenu items on navigation side menu

 function toggle() {

     document.getElementById('node4').style.display = '';

 }

 window.onload = toggle;

//]]>
 </script>

Yet this window.onload example doesn't work in XHTML 1.0 strict. (It doesn't instantly fire countDownClock when page is loaded ):

<script type="text/javascript">
   //<![CDATA[
   //handles the collapse of submenu items on navigation side menu

   function countDownClock() {
       today = new Date();
       openingDay = new Date();
       openingDay.setMonth(2, 23);
       (today > openingDay) ? openingDay.setFullYear(2013) : openingDay.setFullYear();
       openingDay.setHours(9, 0, 0, 0);
       document.getElementById("mallclock").dayNow.value = showDate(today);
       document.getElementById("mallclock").timeNow.value = showTime(today);

       var daysLeft = dayDiff(today, openingDay);
       var hoursLeft = hoursDiff(today, openingDay);
       var minutesLeft = minutesDiff(today, openingDay);

       daysLeft = ((hoursLeft - 24) >= 0) ? daysLeft + (hoursLeft / 24) : daysLeft;
       hoursLeft = ((hoursLeft - 24) >= 0) ? hoursLeft - ((hoursLeft / 24) * 24) : hoursLeft;
       hoursLeft = ((minutesLeft - 60) >= 0) ? hoursLeft + (minutesLeft / 60) : hoursLeft;
       minutesLeft = ((minutesLeft - 60) >= 0) ? minutesLeft - ((minutesLeft / 60) * 60) : minutesLeft;

       document.getElementById("mallclock").days.value = daysLeft;
       document.getElementById("mallclock").hours.value = hoursLeft;
       document.getElementById("mallclock").minutes.value = minutesLeft;

   }

   window.onload = countDownClock;

 //]]>
</script>

It only fires the body event, which is set to show countDownClock 1 minute later

<body onload = "setInterval('countDownClock()', 60000)">
¿Fue útil?

Solución

Aha, the edit made all the difference.

A page can only have one handler for the load event, so if you add one using window.onload and add another one using the body onload attribute, only one of them will work.

Put both actions in the same handler:

window.onload = function(){
  countDownClock();
  window.setInterval(countDownClock, 60000);
};
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top