Добавить обработчик событий для body.onload с помощью Javascript в часть ‹body›

Мы хотим включить карты из Google Maps API в наш документ. В документации указано инициализировать карту с помощью функции, вызываемой событием onload() тела.

Обычный способ вызова:

<body onload="initialize_map();">

Нам это не подходит, потому что мы используем Template::Toolkit, а тег <body> уже включен в нашу оболочку. Вкратце: тег <body> уже напечатан, когда наш код Javascript начинает работать.

Я пробовал что-то подобное, но это работает только для onclick, а не onload. Я думаю, это потому, что код Javascript находится под самим тегом <body>.

var body = document.getElementsByTagName("body")[0];

body.addEventListener("load", init(), false);

function init() {
        alert("it works!");
};

Любая помощь в запуске карты Google Maps приветствуется!


javascript html dom-events onload-event
person Daniel Böhmer    schedule 22.02.2011    source источник

Ответы (5)


arrow_upward
46
arrow_downward 

body.addEventListener("load", init(), false);

Этот init() говорит: запустите эту функцию сейчас и назначьте все, что она возвращает, событию загрузки.

Что вы хотите, так это назначить ссылку на функцию, а не на результат. Поэтому вам нужно отбросить ().

body.addEventListener("load", init, false);

Также вы должны использовать window.onload, а не body.onload.

addEventListener поддерживается в большинстве браузеров кроме IE 8.

person epascarello    schedule 22.02.2011
comment
Для IE это будет attachEvent. quirksmode.org описывает это очень хорошо: quirksmode.org/js/events_advanced.html - person Felix Kling; 22.02.2011
comment
Теперь это дружелюбно - person WebWanderer; 06.04.2015

arrow_upward
41
arrow_downward

Вместо этого вы должны использовать следующее (работает во всех новых браузерах):

window.addEventListener('DOMContentLoaded', init, false);
person Jacob Lauritzen    schedule 15.06.2014
comment
Почему это не работает? document.addEventListener('load', init, false); - person Luke; 14.10.2015
comment
@Luke, вы должны привязать это событие к окну как таковому: window.addEventListener('load', init, false); - person Jacob Lauritzen; 16.10.2015

arrow_upward
19
arrow_downward

Как упоминалось в @epascarello для стандартных браузеров W3C, вы должны использовать:

body.addEventListener("load", init, false);

Однако, если вы хотите, чтобы он работал и в IE‹9, вы можете использовать:

var prefix = window.addEventListener ? "" : "on";
var eventName = window.addEventListener ? "addEventListener" : "attachEvent";
document.body[eventName](prefix + "load", init, false);

Или, если вы хотите, чтобы это было в одной строке:

document.body[window.addEventListener ? 'addEventListener' : 'attachEvent'](
    window.addEventListener ? "load" : "onload", init, false);

Примечание: здесь я получаю прямую ссылку на элемент body через документ, избавляя от необходимости в первой строке.

Кроме того, если вы используете jQuery и хотите использовать событие DOM ready, а не когда тело loads, ответ может быть еще короче...

$(init);
person Mark Rhodes    schedule 12.12.2012

arrow_upward
8
arrow_downward

Поскольку мы уже использовали jQuery для графической привлекательной функции, мы остановились на этом. Код вроде

$(document).ready(function() {
    // any code goes here
    init();
});

сделал все, что мы хотели, и самостоятельно заботится о несовместимости браузеров.

person Daniel Böhmer    schedule 24.02.2011
comment
Также доступна несколько более простая форма $(function() { init(); });. - person Thomas Luzat; 28.02.2014
comment
еще проще было бы $(init); - person Rusi Papazov; 12.09.2014

arrow_upward
3
arrow_downward

Просто оберните код, который вы хотите выполнить, в событие onload объекта окна:

window.onload = function(){ 
   // your code here
}
person Moses    schedule 22.02.2011
comment
Есть 2 потенциальных проблемы с этим подходом. 1) Вы перезаписываете любые другие события onload, которые могли быть прикреплены, и 2) onload, возможно, уже сработал в зависимости от того, где вы поместили этот код, и в результате может никогда не сработать - person Matt; 22.02.2011