it-swarm.com.de

Fügen Sie window.onload zwei Funktionen hinzu

Ich habe zwei Funktionen in meinem Formular, außer dass eine nicht funktioniert, wenn die andere aktiv ist. Hier ist mein Code:

window.onload = function(event) {
    var $input2 = document.getElementById('dec');
    var $input1 = document.getElementById('parenta');
    $input1.addEventListener('keyup', function() {
        $input2.value = $input1.value;
    });
}

window.onload=function(){
    document.getElementById('enable').onchange=function(){
        var txt = document.getElementById('gov1');
        if(this.checked) txt.disabled=false;
        else txt.disabled = true;
    };
};

Ich meine, wenn ich beide Funktionen in meinem Formular habe, funktioniert die zweite Funktion einwandfrei, aber die erste funktioniert nicht. Wenn Sie die zweite Funktion entfernen, funktioniert die erste wie normal. Warum passiert das? Liegt es an den Namen?

38
AJJ

Versuchen Sie, Ihren gesamten Code in dieselbe [und nur 1] Onload-Methode zu setzen!

 window.onload = function(){
        // All code comes here 
 }
30
Janak
window.addEventListener("load",function(event) {
    var $input2 = document.getElementById('dec');
    var $input1 = document.getElementById('parenta');
    $input1.addEventListener('keyup', function() {
        $input2.value = $input1.value;
    });
},false);

window.addEventListener("load",function(){
    document.getElementById('enable').onchange=function(){
        var txt = document.getElementById('gov1');
        if(this.checked) txt.disabled=false;
        else txt.disabled = true;
    };
},false);

Die Dokumentation ist hier

Beachten Sie, dass diese Lösung möglicherweise nicht browserübergreifend funktioniert. Ich denke, Sie müssen sich auf eine 3. Bibliothek verlassen, wie jquery $(document).ready

76
Khanh TO

Wenn Sie die Funktionen aus irgendeinem Grund nicht kombinieren können, aber die Kontrolle über eine dieser Funktionen haben, können Sie Folgendes tun:

window.onload = function () {
    // first code here...
};

var prev_handler = window.onload;
window.onload = function () {
    if (prev_handler) {
        prev_handler();
    }
    // second code here...
};

Auf diese Weise werden beide Handler aufgerufen.

27
chad

Sie können window.onload Nicht zwei verschiedene Funktionen zuweisen. Der Letzte wird immer gewinnen. Dies erklärt, warum, wenn Sie den letzten entfernen, der erste wie erwartet funktioniert.

Sieht so aus, als sollten Sie einfach den Code der zweiten Funktion in den Code der ersten Funktion einfügen.

11

Weil du es überschreibst. Wenn Sie dies mit onload tun möchten, können Sie einfach die vorherige Funktion erweitern. Hier ist eine Möglichkeit, dies zu tun:

Function.prototype.extend = function(fn) {
  var self = this;
  return function() {
    self.apply(this, arguments);
    fn.apply(this, arguments);
  };
};

window.onload = function() {
  console.log('foo');
};

window.onload = window.onload.extend(function() {
  console.log('bar');
});

// Logs "foo" and "bar"

Demo: http://jsbin.com/akegut/1/edit

Bearbeiten: Wenn Sie mit mehreren Funktionen erweitern möchten, können Sie dies verwenden:

Function.prototype.extend = function() {
  var fns = [this].concat([].slice.call(arguments));
  return function() {
    for (var i=0; i<fns.length; i++) {
      fns[i].apply(this, arguments);
    }
  };
};

window.onload = window.onload.extend(function(){...}, function(){...}, ...);
8
elclanrs

Wenn Sie nicht auf das alte window.onload zugreifen können und dennoch ein anderes behalten und hinzufügen möchten, ist hier der Weg,

       function addOnload(fun){
          var last = window.onload;
          window.onload = function(){
            if(last) last();
            fun();
          }
        } 

        addOnload(function(){
            console.log("1");
        });

        addOnload(function(){
            console.log("2");
        });
6
serkan

window.addEventListener funktioniert nicht in IE also benutze window.attachEvent

Sie können so etwas tun

function fun1(){
    // do something
}

function fun2(){
    // do something
}


var addFunctionOnWindowLoad = function(callback){
      if(window.addEventListener){
          window.addEventListener('load',callback,false);
      }else{
          window.attachEvent('onload',callback);
      }
}

addFunctionOnWindowLoad(fun1);
addFunctionOnWindowLoad(fun2);
6
rohit verma

Für einige Zeit habe ich die obige Lösung mit:

window.onload = function () {
    // first code here...
};

var prev_handler = window.onload;
window.onload = function () {
    if (prev_handler) {
        prev_handler();
    }
    // second code here...
};

In einigen Fällen verursachte es jedoch, dass IE) einen "Stapelüberlauffehler" auslöste, der hier in diesem Beitrag beschrieben wird: "Stapelüberlauf in Zeile 0" im Internet Explorer und ein guter schreib es auf hier

Nachdem ich alle Lösungsvorschläge gelesen und bedacht hatte, dass jquery nicht verfügbar ist, kam ich zu folgendem Ergebnis (ich habe die Lösung von Khanh TO mit einigen Überprüfungen der Browserkompatibilität weiter ausgebaut): Halten Sie eine solche Implementierung für angemessen?

function bindEvent(el, eventName, eventHandler) {
            if (el.addEventListener){
                    el.addEventListener(eventName, eventHandler, false); 
                } else if (el.attachEvent){
                    el.attachEvent("on"+eventName, eventHandler);
                }
            }
      render_errors = function() {
      //do something
      }

      bindEvent(window, "load", render_errors);

      render_errors2 = function() {
      //do something2
      }

      bindEvent(window, "load", render_errors2);
4
Tsonev

Verwenden Sie einfach (jQuery):

$(window).load(function() {
  //code
})

$(window).load(function() {
 //code
})
3
Sebastien Horin

Wenn Sie unbedingt separate Methoden haben müssen, die als Ergebnis von window.onload können Sie eine Warteschlange mit Rückruffunktionen einrichten, die ausgelöst werden.

Es könnte in seiner einfachsten Form so aussehen:

var queue = [];
var loaded = false;

function enqueue(callback)
{
    if(!loaded) queue.Push(callback);
    else callback();
}

window.onload = function()
{
    loaded = true;
    for(var i = 0; i < queue.length; i++)
    {
        queue[i]();
    }
}

Und in deinem Fall so verwendet:

enqueue(function()
{
    var $input2 = document.getElementById('dec');
    var $input1 = document.getElementById('parenta');
    $input1.addEventListener('keyup', function()
    {
        $input2.value = $input1.value;

    });

});

enqueue(function()
{
    document.getElementById('enable').onchange=function()
    {
        var txt = document.getElementById('gov1');
        if(this.checked) txt.disabled=false;
        else txt.disabled = true;
    };

});
2
Marty

Durch Beibehalten von 2 window.onload () wird der Code im letzten Block ausgeführt.

2
SadhanaP

Wenn Sie die zweite Funktion in window.onload Grundsätzlich ersetzen Sie einen Wert. Wie bereits gesagt, können Sie die beiden Funktionen in eine Funktion zusammenfassen und window.onload dazu. Wenn Sie verwirrt sind, denken Sie so, wenn Sie ein Objekt object hatten, und Sie haben object.value = 7; object.value = 20 Der Wert wäre 20 window ist nur ein weiteres Objekt

2
aaronman

Sie können nicht mehrere Funktionen an window.onload binden und erwarten, dass alle diese Funktionen ausgeführt werden. Ein anderer Ansatz ist die Verwendung von $ (document) .ready anstelle von window.onload, wenn Sie in Ihrem Projekt bereits jQuery verwenden.

1
Xiaodan Mao

Warum rufen Sie nicht beide Funktionen von einer onload- Funktion aus auf?

function func1() {
    // code
}

function func2() {
    // code
}

window.onload = function() {
    func1();
    func2();
}
0
das Keks