Дадайце дзве функцыі window.onload

У мяне ёсць дзве функцыі на маёй форме, акрамя аднаго, не працуе, калі іншы актыўны. Вось мой код:

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;
    };
};

Тое, што я маю на ўвазе, што, калі ў мяне ёсць абедзве гэтыя функцыі ў маёй форме другая функцыя працуе нармальна, але першы не будзе працаваць, калі выняць другую функцыю, першы з іх будзе працаваць як нармальны, чаму гэта адбываецца? Ці з'яўляецца гэта з-за назвы?

26
Чаму б вам не працягваць выкарыстоўваць лепшы спосаб для апрацоўкі падзей - addEventListener ? Тады вы б не перазапісваць падобныя праблемы
дададзена аўтар Ian, крыніца
Чаму вы не проста дадаць функцыянальнасць другі функцыі ў першым. Ці выклічце другую з першай.
дададзена аўтар Adarsh, крыніца

13 адказы

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);

Documentation is here

Звярніце ўвагу, што гэта рашэнне не можа працаваць ва ўсіх браўзэрах. Я думаю, што вы павінны спадзявацца на 3-й бібліятэкі, як jQuery $ (дакумент) .ready

55
дададзена
<�Код> +1 Тым не менш, ён выкарыстаў addEventListener ўжо ў яго кодзе, так што гэта рашэнне з'яўляецца справядлівым.
дададзена аўтар user1823761, крыніца
+1 Адказ ніжэй хацеў пашырыць або IE канкрэтныя можа задаволіць падтрымку крос-браўзэр, калі рэалізацыя ваніль JS з'яўляецца ласку. Гэта добра і проста, калі IE10 і іншая падтрымка браўзэра addEventListener азначае даданне больш EventListener у дадатак ручкі па змаўчанні: OnLoad, onReadyStateChange, readystatechange, якая б »не ўплывае з дапамогай сцэнарыя трэцяга боку. Спадзяюся, мы не будзем мець праблем гэтай спецыфікацыі неадпаведнасці ў будучыні.
дададзена аўтар Edward Chan JW, крыніца

Паспрабуйце пакласці ўсё, што вам код у той жа [і толькі 1] OnLoad метад!

 window.onload = function(){
       //All code comes here 
 }
26
дададзена
Я не магу зрабіць гэта, паколькі мае функцыі OnLoad дынамічна паўтарае ... = /
дададзена аўтар mthama, крыніца
дзіўнае, што гэта тое, што я шукаў, дзякуй!
дададзена аўтар AJJ, крыніца

Калі вы не можаце аб'яднаць функцыі па нейкай прычыне, але ў вас ёсць кантроль над адным з іх вы можаце зрабіць нешта накшталт:

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

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

Такім чынам, абедзве апрацоўшчыкі выклікаюцца.

19
дададзена
Гэта спосаб, якім я хацеў бы зрабіць гэта. +1
дададзена аўтар Chris Kempen, крыніца
Я атрымліваю Uncaught RangeError: Максімальны памер стэкі выклікаў перавысіў памылкі :(
дададзена аўтар joseantgv, крыніца
Я таксама атрымаў гэтую памылку перапаўнення стэка. Я лічу, што праблема заключаецца ў тым, што prev_handler сканчаецца завостраным да самой функцыі window.onload, якая ў сваю чаргу, называе prev_handler, якая выклікае функцыю window.onload. Паспрабуйце зрабіць падвойную дэлегат, як паказана ў stackoverflow.com/questions/12213234/…
дададзена аўтар Brett, крыніца

Вы не можаце прызначыць дзве розныя функцыі window.onload . Апошні з іх заўсёды будзе выйграваць. Гэта тлумачыць, чаму, калі вы выдаліце ​​апошні, першы пачынае працаваць, як чакалася.

Падобна на тое, вы проста павінны аб'яднаць код другой функцыі ў ў першы.

11
дададзена

Таму што вы перакрываючы яго. Калі вы хочаце зрабіць гэта з OnLoad можна проста пашырыць папярэднюю функцыю. Вось адзін са спосабаў зрабіць гэта:

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

Edit: If you want to extend with multiple functions you can use this:

Function.prototype.extend = function() {
  var fns = [this].concat([].slice.call(arguments));
  return function() {
    for (var i=0; i
7
дададзена

window.addEventListener не будзе працаваць у IE, так што выкарыстоўвайце window.attachEvent

Вы можаце зрабіць нешта накшталт гэтага

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);
5
дададзена

Калі вы не можаце атрымаць доступ да старога window.onload але ўсё яшчэ хоча, каб захаваць і дадаць яшчэ адну, вось так,

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

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

        addOnload(function(){
            console.log("2");
        });
4
дададзена

На працягу некаторага часу я выкарыстаў вышэй раствор з:

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

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

However it caused in some cases IE to throw a "stack overflow error" described here in this post: "Stack overflow in line 0" on Internet Explorer and a good write-up on it here

Пасля прачытання ўсіх прапанаваных рашэнняў і маючы на ​​ўвазе, што jQuery не даступны, гэта тое, што я прыдумаў (далейшае пашырэнне на рашэнне Khánh то'с з некаторай праверкі сумяшчальнасці браўзэра) Як вы думаеце, такая рэалізацыя будзе дарэчы:

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);
3
дададзена

Калі вам абсалютна неабходна мець асобныя метады выклікалі ў выніку window.onload , вы маглі б разгледзець магчымасць стварэння чаргі функцый зваротнага выкліку, якая будзе выклікана.

Гэта можа выглядаць у сваёй найпростай форме:

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]();
    }
}

І выкарыстоўваць у вашым выпадку, напрыклад, так:

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
дададзена

Вы не можаце звязаць некалькі функцый window.onload і чакаць, што ўсе гэтыя функцыі будуць выконвацца. Іншы падыход выкарыстоўвае $ (дакумент) .ready замест window.onload, калі вы ўжо карыстаецеся jQuery ў праекце.

1
дададзена

Калі вы кладзе другую функцыю ў window.onload у асноўным тое, што вы робіце, замяняючы значэнне. Як нехта сказаў, перш чым вы можаце змясціць дзве функцыі ў адну функцыю і ўсталяваць window.onload да гэтага. Калі вы заблыталіся думаць пра гэта такім чынам, калі ў вас аб'ект аб'ект , і вы зрабілі object.value = 7; object.value = 20 значэнне будзе 20 Акно гэта проста яшчэ адзін аб'ект

1
дададзена

Захоўваючы 2 window.onload (), код у апошнім фрагменце выконваецца.

1
дададзена

Проста выкарыстоўвайце (Jquery):

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

$(window).load(function() {
 //code
}
0
дададзена
Гэта здавалася выдатным варыянтам, але не працуе для мяне.
дададзена аўтар Manish, крыніца