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

Я пытаюсь найти способ (если возможно) использовать 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>, однако инструмент тестирования Rich Snippet сообщает, что price не установлено.

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

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

1 Ответ

0 голосов
/ 30 марта 2019

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

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

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

...