window.onload, кажется, инициировал, прежде чем DOM загружается (JavaScript)
Я испытываю затруднения из-за window.onload и document.onload событий. Все, что я считал, говорит мне, что они не инициируют, пока DOM полностью не загружается всеми своими ресурсами, кажется, что этого не происходит для меня:
Я попробовал следующую простую страницу в Chrome 4.1.249.1036 (41514) и IE 8.0.7600.16385 с тем же результатом: оба отобразили сообщение, "Оно перестало работать!", указание, что myParagraph не загружается (и таким образом, DOM кажется неполным).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript">
window.onload = doThis();
// document.onload gives the same result
function doThis() {
if (document.getElementById("myParagraph")) {
alert("It worked!");
} else {
alert("It failed!");
}
}
</script>
</head>
<body>
<p id="myParagraph">Nothing is here.</p>
</body>
</html>
Я использую более сложные сценарии, чем это во внешнем .js файле, но это иллюстрирует проблему. Я могу добраться, это работающий при наличии window.onload установило таймер в течение половины секунды для выполнения doThis (), но это походит на неэлегантное решение и не отвечает на вопрос того, почему window.onload, кажется, не делает то, что все говорят, что это делает. Другое решение состояло бы в том, чтобы установить таймер, который проверит, загружается ли DOM, и если не это просто назовет себя половину секунды спустя (таким образом, это будет продолжать проверять, пока DOM не будет загружен), но это кажется чрезмерно сложным мне. Существует ли более соответствующее событие для использования?
3 ответа
В момент загрузки окна тело еще не загружено, поэтому вы должны исправить свой код следующим образом:
<script type="text/javascript">
window.onload = function(){
window.document.body.onload = doThis; // note removed parentheses
};
function doThis() {
if (document.getElementById("myParagraph")) {
alert("It worked!");
} else {
alert("It failed!");
}
}
</script>
Проверено, работает в FF/IE/Chrome, хотя думаю о том, чтобы обработать document.onload тоже.
Как уже упоминалось, использование js-frameworks будет гораздо лучшей идеей.
Пробовали ли вы использовать вместо этого библиотеку javascript, например, jQuery и это $(document).ready() функция:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
Просто используйте window.onload = doThis; вместо window.onload = doThis();