Блог

Главная - Вопросы по программированию - Возможно ли выполнить некоторые манипуляции с DOM на стороне клиента до того, как документ будет готов?

Возможно ли выполнить некоторые манипуляции с DOM на стороне клиента до того, как документ будет готов?

#javascript #jquery #dom #googlebot #google-rich-snippets

#javascript #jquery #dom #googlebot #google-rich-snippets

Вопрос:

Я пытаюсь найти способ (если это возможно) использовать javascript для добавления некоторых атрибутов к элементу во время рендеринга и до полной загрузки DOM. Я знаю, это звучит контрпродуктивно, но позвольте мне рассказать вам некоторую предысторию:

  • Я работаю на чрезвычайно ограниченной платформе шаблонов, которая дает мне доступ к некоторым переменным страницы, но для них требуются некоторые незначительные манипуляции со строками. Я не могу использовать какую-либо предварительную обработку ASP, поэтому это должно происходить на стороне клиента.
  • В частности, я пытаюсь добавить Schema.org Разметка микроданных для элемента перед тем, как робот Googlebot просканирует содержимое документа.
  • По сути, мне нужно изменить значение атрибута с $5.99 на 5.99 .

Вот моя последняя попытка, которая вносит корректные изменения в DOM, но не раньше, чем средство проверки расширенных фрагментов Google обработает страницу:

 <div class="pitinfo"><div class="padleft padright"><%Product.BasePrice%></div></div>

<!-- at page bottom -->
<script type="text/javascript">
    (function() {
        var pricesting = "<%Product.BasePrice%>";
        var price =  pricesting.slice(1);
        $('.pitinfo').attr('itemprop', 'price');
        $('.pitinfo').attr('content', price);
    })();
</script>

После загрузки я получаю это <div class="pitinfo" itemprop="price" content="9.99">$9.99</div> , однако инструмент тестирования расширенного фрагмента сообщает мне, что price он не установлен.

Я уже пробовал использовать ASP в коде моего шаблона, но хостинг-провайдер этого не разрешает.

Возможно ли внести изменения в DOM где-нибудь в середине процесса рендеринга документа?

Комментарии:

1. Любопытно, почему вы не делаете это на стороне сервера?

2. @charlietfl Это невозможно. Я застрял внутри механизма шаблонов black box, который не разрешает прямой доступ к ASP.

3. Может быть, что rich snippet api просматривает только то, что находится в исходном коде сервера, и не ожидает обновлений javascript. Или для этого требуется какой-то мета-тег, чтобы указать ему сначала запустить javascript. Если это последнее, вы, возможно, не сможете изменить заголовок на стороне сервера

4. Протестируйте с помощью инструмента проверки URL Google Search Consoles, который теперь сообщает о разметке продукта и отображает страницу так же, как это делает Googlebot. Держу пари, что ваша правка там работает.

5. @TonyMcCreath, это сработало! Я не понимал, что инструмент тестирования расширенных фрагментов работает иначе, чем инспектор URL консоли поиска.

Ответ №1:

Можно вставить <script> тег внутри <body> . JavaScript внутри тега загружается до следующего за ним HTML-кода, поэтому вы сможете отредактировать значение элемента до загрузки остальной части HTML / JS.
Например:

 <div>
    <div id="element" value="$5.99"></div>
    <script>
        var element = document.getElementById("element")
        element.value = 5.99;
    </script>
</div>

Вы можете проверить это здесь