Присоединить событие загрузки тела с помощью JS - PullRequest
Новая
       17

Присоединить событие загрузки тела с помощью JS

37 голосов
/ 06 августа 2009

Как мне присоединить событие загрузки тела с JS кросс-браузерным способом? Как все просто? 

  document.body.onload = function(){
      alert("LOADED!");
  }

Ответы [ 7 ]

22 голосов
/ 06 августа 2009

Для этого используется DOMContentLoaded, который срабатывает перед загрузкой, но позволяет вам придерживаться всей своей ненавязчивости ...

window.onload - Дин Эдвардс - В блоге об этом больше говорится - и вот полный код, скопированный из комментариев того же блога. 

// Dean Edwards/Matthias Miller/John Resig

function init() {
  // quit if this function has already been called
  if (arguments.callee.done) return;

  // flag this function so we don't do the same thing twice
  arguments.callee.done = true;

  // kill the timer
  if (_timer) clearInterval(_timer);

  // do stuff
};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
  document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
  var script = document.getElementById("__ie_onload");
  script.onreadystatechange = function() {
    if (this.readyState == "complete") {
      init(); // call the onload handler
    }
  };
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      init(); // call the onload handler
    }
  }, 10);
}

/* for other browsers */
window.onload = init;
21 голосов
/ 06 августа 2009

Почему бы не использовать window собственное событие onload? 

window.onload = function () {
      alert("LOADED!");
}

Если я не ошибаюсь, это совместимо со всеми браузерами.

14 голосов
/ 17 сентября 2012

Кросс-браузерное событие window.load 

function load(){}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]( addEventListener ? 'load' : 'onload', load )
9 голосов
/ 06 августа 2009

document.body.onload является кросс-браузерным, но устаревшим механизмом, который допускает только один обратный вызов (вы не можете назначить ему несколько функций).

Ближайшая «стандартная» альтернатива, addEventListener не поддерживается Internet Explorer (он использует attachEvent), поэтому вы, вероятно, захотите использовать библиотеку (jQuery, MooTools, prototype.js). и т. д.) для отвлечения кросс-браузерного уродства.

2 голосов
/ 20 июля 2011
Идея

jcalfee314 работала для меня - у меня был window.onload = onLoad, что означало, что функции в <body onload="..."> не вызывались (что я не могу контролировать)

Это исправлено: 

oldOnLoad = window.onload
window.onload = onLoad;

function onLoad()
{
oldOnLoad();
...
}

Редактировать: Firefox не понравился oldOnLoad = document.body.onload;, поэтому его заменили на oldOnLoad = window.onload.

0 голосов
/ 10 мая 2016

Почему бы не использовать jQuery? 

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

Насколько я знаю, это идеальное решение.

0 голосов
/ 06 августа 2009

Есть несколько разных методов, которые вы должны использовать для разных браузеров. Такие библиотеки, как jQuery, предоставляют кросс-браузерный интерфейс, который обрабатывает все это за вас.

...