TL;DR
Я использую ajax для получения нового содержимого. Содержимое загружается и добавляется на страницу. Однако сценарии не перезапускаются, потому что их вызовы находятся за пределами ajaxed div
.
Скрипты загружаются и запускаются без каких-либо проблем при загрузке начальной страницы, но не когда я добавляю новый контент через ajax. Я не получаю никаких консольных ошибок, и нет проблем при непосредственном посещении URL.
Связанный:
- Принуждение Script Запуск на загруженной странице AJAX - относится к одному конкретному script. Я хочу исправить (refire) все сценарии, включая динамические, из Приложения Cloudflare
- Использование jQuery Script с Ajax в Wordpress - То же, что и выше, относится только к одному конкретному script
- загруженный контент ajax, Script не выполняется
Введение:
Я использую Ajaxify WordPress Site (AWS) на веб-сайте WordPress.
Плагин позволяет выбрать div
по его идентификатору, а затем извлекает новый контент внутри этого div
с помощью ajax
html markup
<html>
<head></head>
<body>
<div id="page">
<header></header>
<main id="ajax"> <!-- This is what I want to ajaxify -->
<div class="container">
main page content
</div>
</main> <!-- end of ajaxfied content -->
<footer></footer>
</div> <!-- #page -->
</body>
</html>
Проблема
Плагин работает, и я получаю свежий контент, загруженный и оформленный, но есть проблема. Некоторые мои страницы сценарии и вызовы функций находятся за пределами div, в которые я использую ajax. У меня есть два примера
1- Масонство загружается и вызывается в <footer>
<html>
<head></head>
<body>
<div id="page">
<header></header>
<main id="ajax"> <!-- This is what I want to ajaxify -->
<div class="container">
main page content
</div>
</main> <!-- end of ajaxfied content -->
<footer></footer> <!-- Masonry script is loaded and called here -->
</div> <!-- #page -->
</body>
</html>
2- Google maps call находится в <head>
<html>
<head></head> <!-- Google maps is called here -->
<body>
<div id="page">
<header></header>
<main id="ajax"> <!-- This is what I want to ajaxify -->
<div class="container">
main page content
</div>
</main> <!-- end of ajaxfied content -->
<footer></footer>
</div> <!-- #page -->
</body>
</html>
Это всего лишь два примера. В других местах есть другие. Как вы можете сказать, такие сценарии не будут повторно вызваны как единственное, что перезагружается на странице <main id="ajax">
. Хотя существует новое содержимое внутри <main>
, некоторые скрипты, необходимые для его правильного отображения, не переименовываются и поэтому заканчиваются отсутствующими элементами/сломанным макетом.
Я не единственный, кто столкнулся с этой проблемой; быстрый просмотр плагина форума поддержки на wordpress.org показывает, что эта проблема распространена.
Примечание. Я бы не попытался исправить это, если у плагина было много других проблем. Это работает для меня, мне просто нужны сценарии для перезапуска.
Официальным ответом является возможность перезагрузки/перезапуска сценариев, добавив следующее в файлы php плагина:
$.getScript(rootUrl + 'PATH TO SCRIPT');
Что работает. Это работает хорошо. например, если я добавлю
$.getScript(rootUrl + '/Assets/masonry.js');
Затем вызовы функции кладки возвращаются, когда аяксированный контент извлекается, даже если masonry.js загружается вне ajaxed div
Я отсылаю вас к файлам плагинов на github для большей ясности в отношении того, что на самом деле делает исправление (я не могу понять, что происходит когда используется $.getScript
)
В заключение
Официальное исправление работает отлично, если у вас есть 3-4 скрипта, которые нужно перезапустить на ajaxed контенте.
Это не работает для моей цели, потому что
- он слишком жесткий и жестко закодированный
- Некоторые скрипты добавляются на страницу динамически через Приложения Cloudflare
Возможное решение может включать добавление события, имитирующего триггер, вызывающий запуск сценариев в нижней части ajaxed div
Вопрос:
Как заставить все сценарии - , включая динамически добавленные - перезаписать, когда только одна часть страницы была перезагружена через ajax?
Примечания:
-
Я пытаюсь избежать вызова сценариев один за другим, так как это потребует знания их вызовов перед раздачей. Я, вероятно, говорю по голове, но...
Я пытаюсь имитировать загрузку страницы и/или готовые к документу события, при которых запускаются большинство условных скриптов (исправить меня, если я ошибаюсь) - в конце
<main>
в мой html, когда добавляется новый добавленный контент, но не затрагивает документ, когда страница загружается с помощью URL напрямую... или любой другой подобный подход. -
Только для небольшого контекста приведен список некоторых прослушивателей событий на странице , в то время как плагин выключен. Я знаю, что есть вещи, которые мне не придется запускать. Я просто добавил это для справки. Кроме того, обратите внимание, что это образец, взятый с одной из страниц. другие страницы могут отличаться.
DOMContentLoaded
beforeunload
blur
click
focus
focusin
focusout
hashchange
keydown
keyup
load
message
mousedown
mousemove
mouseout
mouseover
mouseup
mousewheel
orientationchange
readystatechange
resize
scroll
submit
touchscreen
unload