☰

window.onload イベントに追加しますか? 質問する

tag-icon • tag-icon javascript jquery
window.onload イベントに追加しますか? 質問する

メソッド呼び出しがすでに割り当てられている場合、window.onload イベントに別のメソッド呼び出しを追加する方法が知りたいです。

スクリプトのどこかにこの割り当てがあるとします...

 window.onload = function(){ some_methods_1() };

そしてスクリプトの後半でこの課題があります

 window.onload = function(){ some_methods_2() };

現状では、 のみがsome_methods_2呼び出されます。window.onloadをキャンセルせずに前のコールバックに追加する方法はありますかsome_methods_1? (また、同じ関数ブロックにsome_methods_1()と の両方を含めずに)。some_methods_2()

window.onloadこの質問は、JavaScript 全般に関する質問ではないと思います。window.onload別の開発者がスクリプトで作業し、window.onload(以前のコードを見ずに) を使用するコードを追加した場合に、onload イベントが無効になるような方法で何かを割り当てたくありません。

私も同じことを考えています

  $(document).ready()

jQuery で、前の内容や後の内容を破壊せずに、追加するにはどうすればよいでしょうか?

ベストアンサー1

jQuery を使用している場合、特別な操作は必要ありません。 を介して追加されたハンドラーは$(document).ready()互いに上書きされず、順番に実行されます。

$(document).ready(func1)
...
$(document).ready(func2)

jQueryを使用していない場合は、addEventListenerKaraxunaが実証したように、さらにattachEventIE<9の場合。

ご了承くださいonloadは$(document).ready()、前者はCSSや画像なども待ちますが、後者はDOMツリーのみ待ちます。最近のブラウザ（IE9以降も）は、DOMContentLoadedドキュメント上のイベントは jQueryreadyイベントに対応していますが、IE<9 では対応していません。

if(window.addEventListener){
  window.addEventListener('load', func1)
}else{
  window.attachEvent('onload', func1)
}
...
if(window.addEventListener){
  window.addEventListener('load', func2)
}else{
  window.attachEvent('onload', func2)
}

どちらのオプションも利用できない場合（たとえば、DOMノードを扱っていない場合）、これを実行できます（onload例として使用していますが、他のオプションもあります）は以下のために利用可能onload）：

var oldOnload1=window.onload;
window.onload=function(){
  oldOnload1 && oldOnload1();
  func1();
}
...
var oldOnload2=window.onload;
window.onload=function(){
  oldOnload2 && oldOnload2();
  func2();
}

または、グローバル名前空間の汚染 (および名前空間の衝突の可能性) を回避するには、インポート/エクスポート IIFE パターンを使用します。

window.onload=(function(oldLoad){
  return function(){
    oldLoad && oldLoad();
    func1();
  }
})(window.onload)
...
window.onload=(function(oldLoad){
  return function(){
    oldLoad && oldLoad();
    func2();
  }
})(window.onload)

おすすめ記事