Ответ 1
Попробуйте поместить все коды в один и тот же метод [и только 1] onload!
window.onload = function(){
// All code comes here
}
У меня есть две функции в моей форме, за исключением того, что один не работает, если другой активен. Вот мой код:
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;
};
};
Я имею в виду, что когда у меня есть обе эти функции в моей форме, вторая функция работает нормально, но первая не будет работать, если выберете вторую функцию, первая будет работать нормально, почему это происходит? Это из-за имен?
Попробуйте поместить все коды в один и тот же метод [и только 1] onload!
window.onload = function(){
// All code comes here
}
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);
Документация здесь
Обратите внимание, что это решение может не работать в браузерах. Я думаю, вам нужно полагаться на 3-ю библиотеку, такую как jquery $(document).ready
Если вы не можете объединить функции по какой-либо причине, но у вас есть контроль над одним из них, вы можете сделать что-то вроде:
window.onload = function () {
// first code here...
};
var prev_handler = window.onload;
window.onload = function () {
if (prev_handler) {
prev_handler();
}
// second code here...
};
Таким образом, вызываются оба обработчика.
Вы не можете назначить две различные функции window.onload
. Последний всегда будет побеждать. Это объясняет, почему, если вы удаляете последний, первый начинает работать, как ожидалось.
Похоже, вы должны просто объединить второй код функции в первый.
Потому что ты его переопределяешь. Если вы хотите сделать это с помощью 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"
Демо: 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(){...}, ...);
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);
Если вы абсолютно должны иметь отдельные методы, инициированные в результате 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;
};
});
В течение некоторого времени я использовал вышеупомянутое решение с помощью:
window.onload = function () {
// first code here...
};
var prev_handler = window.onload;
window.onload = function () {
if (prev_handler) {
prev_handler();
}
// second code here...
};
Однако в некоторых случаях IE вызывал "ошибку", описанную здесь в этом сообщении: "Переполнение стека в строке 0" в Internet Explorer и хорошая запись на нем здесь
Прочитав все предлагаемые решения и имея в виду, что jquery недоступен, это то, что я придумал (дальнейшее расширение решения Khanh TO с некоторой проверкой совместимости с браузером), как вы думаете, такая реализация будет подходящей:
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);
Если вы не можете получить доступ к старому окну. Загрузка еще сохраняется и добавляет еще один, вот путь,
function addOnload(fun){
var last = window.onload;
window.onload = function(){
if(last) last();
fun();
}
}
addOnload(function(){
console.log("1 window is loaded");
});
addOnload(function(){
console.log("2 window is loaded");
});
addOnload(function(){
console.log("3 window is loaded");
});
addOnload(function(){
console.log("4 window is loaded");
});
Когда вы помещаете вторую функцию в window.onload
, в основном то, что вы делаете, заменяет значение. Как кто-то сказал, прежде чем вы можете поставить две функции в одну функцию и установить для нее window.onload
. Если вы смущены, подумайте об этом таким образом, если у вас есть объект object
, и вы сделали object.value = 7; object.value = 20
, значение будет 20 window
- это просто еще один объект
Вы не можете привязать несколько функций к window.onload и ожидать, что все эти функции будут выполнены. Другой подход - использовать $(document).ready вместо window.onload, если вы уже используете jQuery в своем проекте.
Сохраняя 2 window.onload(), выполняется код в последнем фрагменте.
Просто используйте (jQuery):
$(window).load(function() {
//code
}
$(window).load(function() {
//code
}