2013-04-01 3 views
4

index.html window.onload во внешнем скрипте игнорируется в Javascript

<html> 
<head> 
<script type="text/javascript" src="foo.js"></script> 
<script type="text/javascript"> 
window.onload = function() { 
    console.log("hello from html"); 
}; 
</script> 
</head> 
<body> 
<div class="bar">bar</div> 
</body> 
</html> 

foo.js

// this js file will be completely ignored with window.onload 
//window.onload = function() { 

    console.log("hello from external js"); 

    var bar = document.getElementsByClassName("bar"); 

    // this returns 0 instead of 1 
    console.log(bar.length); 
//}; 
  1. Когда window.onload используются в HTML, window.onload от внешнего JS будет игнорируются.
  2. Когда window.onload от внешних JS закомментирована, bar.length возвращает 0.
  3. Когда window.onload из HTML удаляется, window.onload от внешних JS работает отлично.

Может кто-нибудь объяснить, почему я не могу использовать оба window.onload?

Если я должен был использовать window.onload в html, как определить, загружено ли окно из внешних js?

+0

Почему бы вам не попробовать использовать другой текст предупреждения Funtion для внешний файл js, чтобы узнать, откуда он загружен? – Si8

ответ

7

1) Как вы привязываетесь, вы можете использовать только один метод для события. Вам нужно добавить слушателя событий для того, что вы хотите.

window.addEventListener("load", function() { alert("hello!");}); 

Установка непосредственно метода события onload заменит любой ранее установленный метод. Но если вы используете слушателей вместо этого, у вас может быть много из них связанных с событием.

2) Если вы закомментируете загрузку во внешнем файле, когда вызывается document.getElementsByClassName("bar"), ваш документ еще не готов, тогда он вернет 0 элементов.

3) Используйте addEventListener, как я объяснил в первом пункте. Если вы примените это в обоих местах, это будет работать как шарм.

+0

Я заменил 'window.onload'' window.addEventListener' во внешних js, как вы сказали, он работает как шарм. Спасибо. – user1643156

0

onload является собственностью окна. Он действует как любое другое свойство переменной. Когда вы пытаетесь использовать его дважды, вы перезаписываете исходное значение своей второй записью.

Так весь ваш внешний скрипт игнорируется, когда вы заверните его в window.onload, потому что window.onload затем переписывается быть

function() { 
    console.log("hello from html"); 
}; 

Если вы хотите сделать выполнять 2 функции, определить 2 функции, a и b,

и установить window.onload так:

window.onload = function(){ 
    a(); 
    b(); 
} 

A В качестве альтернативы, вы можете связать 2 отдельных события в ответе Алсида. Мое личное мнение состоит в том, что его очиститель делает одно связывание с несколькими функциями, поскольку его легче узнать, что связано, знать, в каком порядке будут выполняться ваши функции, и видеть все, что происходит в одном месте, но в основном это вопрос стиля/предпочтения если порядок не имеет значения.

0

То Правильно, вы перезаписать свой собственный OnLoad, но вы всегда можете прикрепить новый слушатель событий к окну, как этот

function onLoadHandler(){ 
console.log("hello from external js"); 

var bar = document.getElementsByClassName("bar"); 

// page not loaded, so this returns 0 instead of 1 
console.log(bar.length); 
} 
if (window.addEventListener) { 
window.addEventListener('load', onLoadHandler); } 
else if (window.attachEvent) { window.attachEvent('onload', onLoadHandler); } 
+0

Благодарим вас за напоминание о прослушивателе событий в кросс-браузере. – user1643156

Смежные вопросы