web-dev-qa-db-ja.com

JSでbody onloadイベントを添付します

クロスブラウザの方法でJSにbody onloadイベントを添付するにはどうすればよいですか？これほど簡単ですか？

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

これは、onloadの前に起動するDOMContentLoadedを利用しますが、邪魔にならないようにすることができます...

window.onload-Dean Edwards -ブログの投稿でそれについて詳しく説明しています-そして、同じブログのコメントからコピーした完全なコードを次に示します。

// 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;
22
gnarf

window独自のonloadイベントを使用しないのはなぜですか？

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

間違っていなければ、すべてのブラウザーで互換性があります。

21
Andreas Grech

クロスブラウザwindow.loadイベント

function load(){}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]( addEventListener ? 'load' : 'onload', load )
14
Aamir Afridi

document.body.onloadはクロスブラウザですが、単一のコールバックのみを許可するレガシーメカニズムです（複数の機能を割り当てることはできません）。

最も近い「標準」の代替手段である addEventListener はInternet Explorerでサポートされていない（attachEventを使用）ため、ライブラリ（jQuery、MooTools 、prototype.jsなど）を使用して、クロスブラウザのさを抽象化します。

9
Marcello Bastea-Forte

jcalfee314のアイデアはうまくいきました-window.onload = onLoadがあったので、<body onload="...">の関数が呼び出されていませんでした（制御できません）。

これにより修正されました。

oldOnLoad = window.onload
window.onload = onLoad;

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

編集：FirefoxはoldOnLoad = document.body.onload;を好まなかったため、oldOnLoad = window.onloadに置き換えられました。

2
hajamie