38

クロスブラウザの方法で JS を使用して body onload イベントをアタッチするにはどうすればよいですか? これほど簡単ですか？

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

7 に答える 7

22

これは、オンロードの前に起動する 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;
于 2009-08-05T22:11:11.607 に答える
21

window独自のonloadイベントを使用してみませんか?

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

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

于 2009-08-05T22:08:11.177 に答える
14

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

function load(){}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]( addEventListener ? 'load' : 'onload', load )
于 2012-09-17T13:55:30.897 に答える
9

document.body.onloadはクロスブラウザーですが、単一のコールバックしか許可しない従来のメカニズムです (複数の関数を割り当てることはできません)。

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

于 2009-08-05T22:11:31.327 に答える
2

jcalfee314 のアイデアは私にとってはうまくいきました -window.onload = onLoadの関数<body onload="...">が呼び出されていないことを意味していました (これは制御できません)。

これで修正されました：

oldOnLoad = window.onload
window.onload = onLoad;

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

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

于 2011-07-20T17:20:22.423 に答える
-1

ブラウザごとに異なる方法を使用する必要があります。ただし、jQuery のようなライブラリは、すべてを処理するクロスブラウザー インターフェイスを提供します。

于 2009-08-05T22:02:40.347 に答える
-4

なぜjQueryを使わないのですか?

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

私の知る限り、これは完璧なソリューションです。

于 2016-05-10T12:15:13.747 に答える