Добавить обработчик событий для тела.onload по javascript в части

мы хотим включить карты из 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 оценили!

5 ответов


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

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

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

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

также вы должны использовать окно.загружено, а не тело.события onload

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


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

window.addEventListener('DOMContentLoaded', init, false);

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

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

однако, если вы хотите, чтобы он работал на IE

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

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

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

$(init);

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

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

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


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

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