Добавить обработчик события для body.onload с помощью JavaScript в пределах <body>части - PullRequest
Новая
       23

Добавить обработчик события для body.onload с помощью JavaScript в пределах <body>части

31 голосов
/ 22 февраля 2011

Мы хотим включить карты из 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 ]

41 голосов
/ 22 февраля 2011 
body.addEventListener("load", init(), false);

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

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

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

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

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

31 голосов
/ 15 июня 2014

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

window.addEventListener('DOMContentLoaded', init, false);
18 голосов
/ 12 декабря 2012

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

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

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

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 вместо тела load s, ответ может быть еще короче ... 

$(init);
8 голосов
/ 24 февраля 2011

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

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

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

2 голосов
/ 22 февраля 2011

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

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