где лучшее место для размещения фрагмента кода JavaScript, чтобы изменить DOM страницы до ее рендеринга - PullRequest
Новая
       30

где лучшее место для размещения фрагмента кода JavaScript, чтобы изменить DOM страницы до ее рендеринга

6 голосов
/ 28 апреля 2010

У меня есть несколько динамических страниц, и я хочу изменить некоторые элементы, прежде чем страница полностью отобразится.

Мой фрагмент похож на 

document.body.getElementById("change").innerHTML = "<img src...";

У меня нет доступа для изменения стороны сервера контента.

Где лучше всего поместить фрагмент кода для запуска кода перед отображаемой страницей?

Скорее, оптимально ли поместить javascript в HEAD (внутри события window.onload?) Или перед закрывающим BODY (не внутри слушателя событий)?

Ответы [ 5 ]

2 голосов
/ 28 апреля 2010

Боюсь, вы вряд ли сможете выполнить свой сценарий до отображения страницы. Конечно, вы можете разместить встроенный скрипт и использовать его в document.write (...) там, где вы хотите, чтобы он отображал ваш контент, но это ужасное решение. В противном случае лучшее, что вы можете сделать, - это событие «DOM Ready», хотя это трудно сделать во всех браузерах последовательно, вам действительно нужна библиотека для абстрагирования деталей. jQuery предоставляет готовый метод для запуска события, когда DOM готов, а не когда страница и все ресурсы загружены.

1 голос
/ 28 апреля 2010

Не уверен, что я правильно понимаю вашу проблему, но если вы используете прослушиватель событий внутри головы (например, jQuery's $(document).ready()), вы сможете изменить элемент после загрузки структуры dom, передав свой фрагмент функция (handler) вызывается при возникновении события. 

<HEAD>
    //...
    <SCRIPT type="text/javascript">

        $(document).ready(function() {
            $("#change").append(
                $("<img src=\"...\">") 
            ) ;
        }) ;

    <SCRIPT>

</HEAD>

Используя базовый javascript, вам придется раскошелиться на прослушиватели событий для спецификаций событий Mozilla (W3C) и Internet Explorer. В интернете много документации о том, как это сделать.

В любом случае, лучший способ сделать это в этом случае - создать контент самостоятельно, а не изменять его после рендеринга.

1 голос
/ 28 апреля 2010

Поскольку браузер обычно отображает элементы сразу после их анализа, наилучшим способом будет размещение кода в элементе script непосредственно после ссылочного элемента: 

<div id="change"></div>
<script type="text/javascript">
    document.body.getElementById("change").innerHTML = "<img src...";
</script>
0 голосов
/ 15 мая 2017

Если вы не хотите отображать какие-либо элементы перед внесением изменений в DOM, вы можете установить CSS display: none для элемента body, а затем изменить его на display: block, как только вы закончите.

0 голосов
/ 28 апреля 2010

AFAIK вы не можете сделать это.Потому что до отображения страницы не будет никакого элемента, и вы не сможете получить доступ к элементам, которые не были загружены в дерево DOM.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...