64

フォームに 2 つの関数がありますが、一方がアクティブな場合は機能しません。これが私のコードです：

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

つまり、フォームにこれらの両方の機能がある場合、2 番目の機能は正常に機能しますが、最初の機能は機能しません。2 番目の機能を取り出すと、最初の機能は通常どおり機能します。名前のせいでしょうか？

4

17 に答える 17

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

ドキュメントはこちら

このソリューションは、ブラウザ間では機能しない場合があることに注意してください。jquery のような 3 番目のライブラリに依存する必要があると思います$(document).ready

于 2013-05-22T04:00:16.987 に答える
10

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);
于 2015-04-10T07:23:08.870 に答える
9

あなたはそれをオーバーライドしているからです。やりたい場合はonload、前の関数を拡張するだけです。これを行う1つの方法は次のとおりです。

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"

デモ: http://jsbin.com/akegut/1/edit

編集：複数の機能で拡張したい場合は、これを使用できます：

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(){...}, ...);
于 2013-05-22T04:03:04.470 に答える
5

単に使用する（jQuery）：

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

$(window).load(function() {
 //code
})
于 2016-02-19T13:36:26.760 に答える
3

2 つの window.onload() を保持することで、最後のチャンクのコードが実行されます。

于 2013-06-04T11:39:15.870 に答える
3

1 つの関数から両方の関数を呼び出さないのはなぜonloadですか?

function func1() {
    // code
}

function func2() {
    // code
}

window.onload = function() {
    func1();
    func2();
}
于 2019-02-27T08:49:20.817 に答える
2

複数の関数を window.onload にバインドして、これらの関数のすべてが実行されることを期待することはできません。プロジェクトですでに jQuery を使用している場合は、window.onload の代わりに $(document).ready を使用する別の方法もあります。

于 2013-05-22T04:01:13.803 に答える
2

の結果としてトリガーされる別のメソッドがどうしても必要な場合は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;
    };

});
于 2013-05-22T04:03:13.467 に答える
2

基本的に2番目の関数を入れるとwindow.onload、値を置き換えることになります。前に誰かが言ったように、2 つの関数を 1 つの関数に入れて、それに設定window.onloadすることができます。混乱している場合は、このように考えてください。 objectobjectがありobject.value = 7; object.value = 20、値が 20 になるwindowと、別のオブジェクトにすぎません。

于 2013-05-22T03:58:59.837 に答える
0

私は他の答えが好きではなかったので、これを行う別の方法を見つけました。

これは、この関数で実現できます。
readyState には、読み込み、インタラクティブ、完全な 3 つのオプションがありますhttps://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

したがって、このスクリプトは機能します。

<script>
  if (typeof whenDocReady === "function") {
    // already declared, do nothing
  } else {
    function whenDocReady(fn) {
      // see if DOM is already available
      if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
      } else {
        document.addEventListener("DOMContentLoaded", fn);
      }
    }
  }
</script>

このスクリプトを定義した後の使用法:

<script>
whenDocReady(function() {
//do whatever stuff what you would do on window.onload
};
</script>

クレジット: https://stackoverflow.com/a/9899701/1537394

于 2020-01-28T07:58:54.097 に答える