Выполнить встроенный javascript в WordPress после полной загрузки страницы.

На чтение 4 мин Опубликовано 26.12.2024

Содержание

Вопрос или проблема
Ответ или решение
Шаги для реализации:
Пример кода:
Объяснение кода:
Заключение:

Вопрос или проблема

Я пытаюсь выяснить, сколько времени требуется для полной загрузки страницы в WordPress с использованием JavaScript. Мой JavaScript код встроен. Я использую хук wp_print_scripts, но поскольку он выводит скрипты в заголовок документа, у меня есть сомнения, что я получаю время после полной загрузки страницы. Я не получаю правильное время, так как содержимое тела и нижнего колонтитула еще не было выполнено/загружено. Поэтому я думаю, что получаю время загрузки заголовка, а не всей страницы. Я не могу использовать хуки wp_footer и shutdown, потому что моя страница кэширована. Как я могу выполнить свой код, чтобы получить время после полной загрузки страницы, не очищая/сбрасывая кэш?
Вот мой код:

my-plugin.php

function print_script() {

    <script type="text/javascript">
    window.onload = function () {
        var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart;
        alert(loadTime);
        console.log(loadTime);
    }
            var var1 = <?php echo json_encode('var1'); ?>;
            var var2 = <?php echo json_encode('var2'); ?>;
            var var3 = <?php echo json_encode('var3'); ?>;

    </script>


  }
add_action('wp_print_scripts', 'print_script');

Я думаю, в этом случае вам следует использовать echo:

function print_script() {

echo '<script type="text/javascript">
window.onload = function () {
    var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart;
    alert(loadTime);
    console.log(loadTime);
}
        var var1 = <?php echo json_encode('var1'); ?>;
        var var2 = <?php echo json_encode('var2'); ?>;
        var var3 = <?php echo json_encode('var3'); ?>;

</script>';


}
 add_action('wp_print_scripts', 'print_script');

Ответ или решение

Чтобы выполнить встроенный JavaScript в WordPress после полной загрузки страницы, вам следует использовать событие load, чтобы гарантировать, что весь контент, включая изображения и другие ресурсы, загружен. Ваша исходная реализация использует хук wp_print_scripts, но он выводит скрипты в заголовке, что может не подходить для вашей цели. Поскольку вы хотите получить время, затраченное на полную загрузку страницы, целесообразно использовать событие load, которое срабатывает после загрузки всех элементов страницы. Вот как вы можете это сделать:

Шаги для реализации:

Выбор хука: Вместо wp_print_scripts, который выводит скрипты в заголовке, лучше использовать wp_footer, чтобы вставить скрипт в конец документа перед закрывающим тегом </body>. Однако, если кэширование мешает вам использовать этот метод, рассмотрите возможность использования JavaScript для вставки скрипта прямо в HTML.
Код скрипта: Вам необходимо использовать window.onload, чтобы убедиться, что код запускается только после полной загрузки страницы. Используйте window.performance для получения времени.
Кэширование: Если кэширование все же мешает вам, вы можете условно добавить скрипт на страницы, где это необходимо.

Пример кода:

function print_script() {
    ?>
    <script type="text/javascript">
        window.onload = function () {
            // Измеряем время полной загрузки страницы
            var loadTime = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
            alert("Время загрузки страницы: " + loadTime + " миллисекунд");
            console.log("Время загрузки страницы:", loadTime);
        }

        var var1 = <?php echo json_encode('var1'); ?>;
        var var2 = <?php echo json_encode('var2'); ?>;
        var var3 = <?php echo json_encode('var3'); ?>;
    </script>
    <?php
}
add_action('wp_footer', 'print_script');

Объяснение кода:

window.onload: Это событие гарантирует, что ваш код выполняется только после полной загрузки страницы, включая все ресурсы.
window.performance.timing: Эти параметры позволяют измерить время, прошедшее между началом загрузки и завершением. Используя loadEventEnd, вы получаете точное время, когда все элементы страницы загружены.
JSON Encode: Мы используем json_encode, чтобы передать значения PHP в JavaScript.

Заключение:

Хотя использование wp_footer является оптимальным для данной задачи, если у вас есть проблемы с кэшированием, вы можете попробовать выполнить вставку скрипта через AJAX или непосредственно в HTML, если это возможно. Но чаще всего, правильная реализация через хуки и использование JavaScript поможет вам добиться необходимого результата. Убедитесь, что не нарушаете производительность страницы, и тестируйте на всех устройствах для избежания потенциальных проблем.