63

すでにメソッド呼び出しが割り当てられている後、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で。前に来たもの、または後に来る可能性のあるものを破壊せずに、どうすれば追加できますか？

4

4 に答える 4

58

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

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

jQuery を使用していない場合はaddEventListener、Karaxuna で示されているように、attachEventIE<9 に加えて を使用できます。

onloadは同等ではないことに注意してください$(document).ready()- 前者は CSS や画像なども待機しますが、後者は DOM ツリーのみを待機します。最新のブラウザー (および IE9 以降の IE)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)
于 2013-03-22T06:48:11.793 に答える
48

代わりにattachEvent（ie8）とaddEventListenerを使用できます

addEvent(window, 'load', function(){ some_methods_1() });
addEvent(window, 'load', function(){ some_methods_2() });

function addEvent(element, eventName, fn) {
    if (element.addEventListener)
        element.addEventListener(eventName, fn, false);
    else if (element.attachEvent)
        element.attachEvent('on' + eventName, fn);
}
于 2013-03-22T06:26:21.793 に答える
9

基本的に2つの方法があります

  1. の前の値を格納してwindow.onload、コードの実行前または実行後にコードが前のハンドラーを呼び出すことができるようにします

  2. このアプローチを使用するaddEventListener（もちろん、Microsoftはこれを嫌い、別の別の名前を使用する必要があります）。

2番目の方法は、別のスクリプトが使用したい場合にもう少し安全性を提供window.onloadし、協力を考えずに実行しますが、Javascriptの主な前提は、すべてのスクリプトがあなたがやろうとしているように協力することです。

他の未知のスクリプトで動作するように設計されていない不良スクリプトは、たとえばプロトタイプをいじったり、グローバル名前空間を汚染したり、domを損傷したりすることによって、常にページを壊す可能性があることに注意してください。

于 2013-03-22T06:34:56.613 に答える