куда лучшее место должно поместить отрывок JavaScript для изменения DOM страницы, прежде чем это представит
У меня есть несколько динамических страниц, и я хочу изменить определенные элементы, прежде чем страница полностью представила.
Мой отрывок - что-то как
document.body.getElementById("change").innerHTML = "<img src...";
У меня нет доступа для изменения стороны сервера содержания.
Куда лучшее место должно поместить отрывок, чтобы выполнить код перед страницей, это представило?
Скорее действительно ли помещением является JavaScript в любом ГОЛОВА (в window.onload событии?) или перед заключительным ТЕЛОМ (не в слушателе события) оптимальный?
4 ответа
НАЖМИТЕ, вы не можете сделать это. Потому что до того, как страница будет отрисована, не будет никаких элементов, и вы не сможете получить доступ к элементам, которые не были загружены в дерево DOM.
Боюсь, вы вряд ли сможете выполнить свой сценарий до того, как страница отобразится. Конечно, вы можете разместить встроенный скрипт и заставить его использовать document.write (...) в том месте, где вы хотите, чтобы он отображал ваш контент, но это ужасное решение. В противном случае лучшее, что вы можете сделать, - это принять участие в мероприятии «DOM Ready», хотя это сложно сделать во всех браузерах последовательно, вам действительно нужна библиотека, чтобы абстрагироваться от деталей. jQuery предоставляет готовый метод для запуска события, когда DOM готов, а не когда страница и все ресурсы завершают загрузку.
Поскольку браузер обычно отображает элементы сразу после того, как они были проанализированы, лучшим способом было бы разместить код непосредственно в элементе скрипта после указанного элемента:
<div id="change"></div>
<script type="text/javascript">
document.body.getElementById("change").innerHTML = "<img src...";
</script>
Не уверен, что я правильно понимаю вашу проблему, но если вы используете прослушиватель событий внутри заголовка (например, jQuery $ (document) .ready () ), вы сможете изменить элемент один раз структура dom была загружена путем передачи вашего фрагмента в функцию ( обработчик ), вызываемую при возникновении события.
<HEAD>
//...
<SCRIPT type="text/javascript">
$(document).ready(function() {
$("#change").append(
$("<img src=\"...\">")
) ;
}) ;
<SCRIPT>
</HEAD>
Используя основной javascript, вам нужно будет форкнуть ваши прослушиватели событий для спецификаций событий Mozilla (W3C) и Internet Explorer. В Интернете есть масса документации о том, как это сделать.
В любом случае, в этом случае, очевидно, лучше всего было бы создать контент самостоятельно, а не изменять его после рендеринга.