9

最近、次の問題が発生しました。

私の Web サイトのすべての HTML ページで、body onLoad イベントで関数を呼び出します。

<body onLoad="func1();">

これは、HTML のテンプレートの一部であるため、サイトのすべてのページに表示され、変更できません。さて、いくつかのページでは、他の関数 onload を呼び出す必要があり、window.onload プロパティで試しましたが、func1 の呼び出しが消去されます...

私は今、次のように言うことができます：

window.onload = func2(); //where func2() calls to func1()

しかし、これは汚くて不自由に見えますか？ではない ？

では、古い関数を削除せずに、オンロードで実行しようとしている関数にいくつかの関数を追加する方法はありますか? さらに、それが役立つ場合はasp.netを使用します...

ありがとう！

4

5 に答える 5

19

jQueryを使用して、ロードハンドラーをチェーンできます。ハンドラーを繰り返し使用するjQuery.loadか、jQuery(document).readyチェーンします（私は信じています）。他のオプションは、プログラムでそれを行うことです。つまり、onloadハンドラーをチェーンする補助関数が必要です。クロージャ（または無名関数）を使用してこれを行うことができます：

var addOnLoadHandler = function(newHandler) {

    if (typeof window.onload != 'function') {
        window.onload = newHandler;
    }

    else {
        var oldHandler = window.onload;
        window.onload = function() {
            if (oldHandler) {
                oldHandler();
            }
            newHandler();
        };
    }
};

ただし、プログラムで関数をバインドする必要があるため、次のことを行う必要があります。

addOnLoadHandlers(function() {
 alert("Hi I am the first onLoad handler!");
});

addOnLoadHandlers(function() {
 alert("Hi I am the second onLoad handler!");
});

javascriptファイル（またはhtmlファイル）。

別のアプローチは、配列を使用することです。

var onloaders = new Array();

function runOnLoads() {
    for (i = 0; i < onloaders.length; i++) {
        try {
            var handler = onloaders[i];
            handler();
        } catch(error) {
            alert(error.message);
        }
    }
}

function addLoader(obj) {
    onloaders[onloaders.length] = obj;
}

HTMLまたはJavascriptファイルで次のことを行います。

addLoader(function() {
 alert("Hi I am the first onLoad handler!");
});

addLoader(function() {
 alert("Hi I am the second onLoad handler!");
});

それからあなたのhtmlであなたはただすることができます<body onload="runOnLoads()">

于 2010-02-16T22:48:23.283 に答える
5

匿名関数を最大限に活用することをお勧めします。

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

これまでのトップ10のカスタムJavaScript関数から借用しました。

于 2010-02-16T22:47:27.283 に答える
5

jQuery には、複数の定義済みハンドラーを「準備完了」イベントに追加するための優れた省略形があります ($(document).ready(function(){}); を使用する必要がある無名関数では機能しません)。

単に

$(myFunction);
$(myFunction2);

大きな利点の 1 つは、DOM が既に読み込まれている場合でも、これは起動されますが、イベントの後に window.onload にバインドしたものは呼び出されないことです。

于 2010-02-17T06:26:48.560 に答える
3

jqueryのようなjavascriptライブラリを検討しましたか？他のアプローチがあることは知っていますが、jqueryはあなたの生活をとても楽にしてくれます...

$(function(){
   //Do stuff when DOM is loaded.
   func1();
    $('#link').click(function(){
        //bind a click event
    });
});

古典的なアプローチは、ページの下部にすべての関数を貼り付けることです:)

于 2010-02-16T22:46:38.680 に答える
3

jqueryでできること

$(document).onload(function() {
  // do something
}

//その後

$(document).onload(function() {
  // do something here too!
}

jQuery は両方のイベントを onload イベントにインテリジェントに追加し、ページの読み込み時に両方が実行されます。jQuery を使用すると、追加のボーナスとしてクロスブラウザーのサポートも得られます。

于 2010-02-16T23:25:18.687 に答える