Как отловить EventListener при ajax?

Question

[Павел Корнилов]

Всем привет!
Гуглю второй день, ничего путного, может кто-то сталкивался?

Контент сайта грузится асинхронным запросом. Контент содержит в себе скрипты, которые отрабатываются при его загрузке. До этого этапа всё хорошо, работает.

Теперь внимание!

Когда скрипты внутри контента содержат обработчики событий, добавленные через addEventListener - они не исполняются. Получить список обработчиков, висящих на DOM-элементе, средствами броузера не возможно. Иначе было бы всё просто - исполнить их по загрузке контента.
Конкретно интересует обработка событий load и pageshow. И именно добавленных через addEventListener.

Answer 1

[asd111]

Скрипты, загруженные через ajax НЕ выполняются. Их нужно выполнять вручную.
Получаем нужный javascript со всеми event listener через AJAX:

<script type="text/javascript" id="runscript">
    alert("running from main");
</script>

После получения делаем:

eval(document.getElementById("runscript").innerHTML);

Но лучше взять vuejs и забыть про проблемы на фронтенде.

Comments

[Павел Корнилов]

Спасибо за ответ.
Скрипты выполняются, об этом я указал в вопросе. Это не есть вопрос и давно уже решено.
Попробую конкретизировать вопрос, сведя к одному примеру.

Итак, есть подгружаемый динамически контент, внутри которого требуется определить getBoundingClientRect конкретного DOM-узла, на основании чего идут дальнейшие построения. Если страницу грузить классическим http, то всё гуд и на своих местах. Но вот, при подгружении аяксом, все тоже работает, но значения вычисляются не верные.
Поэтому мне нужно знать, как определить момент полной ОТРИСОВКИ страницы, чтобы манипулировать уже с позициями DOM-узлов в их "финишном" положении.

Это всего лишь одна задача, таких еще достаточно. Общий смысл описан в вопросе.
Сразу уточню, что данная логика применяется только к конкретной странице => не может быть вынесена в общую архитектуру, как мне уже писали, что скрипты в контенте - не комильфо.

Answer 2

[darksladen]

Повесьте обработчик на document.
document.addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was an item with class 'foo'
if(e.target && e.target.className == "foo") {
console.log("foo "+e.target.innerText+" was clicked!");
}
});

Comments

[Павел Корнилов]

Дайте пример, пожалуйста. Не могу понять, что вы имеете в виду.

[darksladen]

KorniloFF, смотрите.. такой подход используется в jquery. Таким образом вам не нужно париться, когда загрузилась страница и есть ли в данный момент элемент, на которое вы вешаете обработчик, так как вы вешаете обработчик на документ

[Павел Корнилов]

darksladen, а, вы про делегирование событий...
Этот подход мне известен и не годится для решения вопроса. Или есть какой-то способ использовать делегирование применительно именно к

Конкретно интересует обработка событий load и pageshow. И именно добавленных через addEventListener.

???

[darksladen]

KorniloFF, ок, то есть вы просто берете и грубо говоря вставляете страницу в body и надетесь, что скрипты, которые там есть заработают?

[Павел Корнилов]

darksladen, да, именно, более того, они и работают, все. кроме... см. вопрос =)

[Павел Корнилов]

darksladen, пока не могу выложить в паблик, поскольку много глюков, но на локальном сервере все протестировано. Более того, даже удалось добиться очередности исполнения скриптов.

[darksladen]

KorniloFF, могу ли я спросить, а каковы плюсы вашего подхода? Вы не думали сделать просто нормальную архитектуру, нежели делать то, чем вы занимаетесь? Посмотрите, что такое webpack и делайте бандлы. Скрипты в контенте так себе идея..

[darksladen]

И вы какой то фреймворк юзаете или что? Потому что, когда используют фреймворк, то рендерят страницу на сервере, а потом готовую отправляют уже.. Вы о сео не думали?

[Павел Корнилов]

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

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

[darksladen]

KorniloFF, каким образом с сео все отлично, если при начальной загрузки у вас контента нет? Нажмите в браузере ctrl+U и увидите, как видит вашу страницу поисковик!

знаю, но это вынужденная мера, поскольку перевожу на аякс существующий сайт, и переписывать контент некогда.

И что? Любой аякс сайт должен быть лепкой из пластелина? Для этого и существуют фреймворки.. Укаждого фреймворка есть нативный серверный рендеринг! То есть на сервере они весь фронт собирают и приводят его к начальному виду и потом уже отдают эту сборку пользователю. В любому случае никто вас не заставляет вставлять скрипты в контент!!! Вы так и не ответили почему вы это делаете.. Переписывать контент некогда? В каком смысле? Подключить все скрипты, а лучше сбилдить их в 1 файл некогда?

[darksladen]

Вообщем для общего развития, просто почитайте доку по vuejs, начальное понимание придет уже через час-два.. https://github.com/vuejs/vue-hackernews-2.0 - вот к примеру посмотрите как реактивно может работать сайт на аяксе - https://vue-hn.now.sh/top и удивитесь.. Сверху справа ссылка на исходники

[Павел Корнилов]

В любому случае никто вас не заставляет вставлять скрипты в контент!!

Без этого - никак. Рассматривайте это как исключение, или как эмпирическую задачу. Просто речь идет о скриптах, которые не являются инструментами сайта. Они и являются контентом, если грубо говорить. И хватит об этом.
Всё же, вопрос был о другом. Судя по постам разных форумов, которые я нагуглил в процессе поиска решения, этот вопрос в разных интерпретациях интересует далеко не меня одного.
Но, честно говоря, уже не думаю, что здесь кто-то сможет на него ответить.

[Павел Корнилов]

вот к примеру посмотрите как реактивно может работать сайт на аяксе

The connection has timed out

[darksladen]

KorniloFF, океееейй... А если вам сделать в объект contentScripts, а при подгрузке контента, скрипты будут пушить туда эти ваши обработчики? contentScripts.getBoundingClientRect = function... Не понимаю, что так сделать мешает?

[Павел Корнилов]

darksladen,

А если вам сделать в объект contentScripts, а при подгрузке контента, скрипты будут пушить туда эти ваши обработчики?

Получить список обработчиков, висящих на DOM-элементе, средствами броузера не возможно.

[darksladen]

KorniloFF, Кто вам такое сказал? У вас есть родительский элемент - это window! Это глобальный объект для вашего приложения!

[Павел Корнилов]

darksladen, это мне сказала документация по Мозилле.

Answer 3

[Константин]

1. Обработчики должны быть всплывающими (propogate), если работать с ДОМ. Перегружать нужно не всю страницу, а лишь объект (body, content, конкретный div и тп), в таком случае ДОМ обработчики (click, resize, keyboard ...) должны стоять на родительском для перегружаемого объекте. Читайте про event bubbling и event propagation
2. Интересующие тебя обработчики - можно симулировать событие. В частности onload срабатывает 1 раз на загрузке страницы, и фффсее. НО, в таком случае при загрузке нового конетнта, кто мешает вызвать обработчик принудительно? Тот же обработчик на onload и тотже на AJAX success
3. Посмотри в сторону JSONP
4. не мучайся, возьми Vue

Comments

[Павел Корнилов]

1. Это все понятно и известно. Уже реализовано всё, что только возможно по этим принципам. Конкретно в моём случае - перегружаются блоки с контентом и меню. К сожалению, не получилось пока сделать это в 1 запрос, поскольку, если делаю общий серверный обработчик, возвращающий в клиент JSON, то не получается его корректно распарсить в клиенте (JSON.parse() плохо работает с юникодом). Ну, а все обработчики, ессно, висят на этих блоках и отлично работают.
2. Это интересно, но пока не могу сообразить, как мне симулировать событие в нужное время. То есть опять же, нужно иметь какой-то listener, отслеживающий момент такой симуляции. И круг замкнулся. Или я чего-то не понял? Попробуйте дать пример.
3. Пока тоже не вижу, как можно его привязать под свои нужды. Хотя глубоко с ним не разбирался. Если я правильно понял, его используют чаще при кросс-доменных запросах.
4. Мне интересно сейчас самому собрать основную архитектуру аякс-сайта, причем суметь обойти все распространённые проблемы. И у меня это уже почти получилось, из непробиваемого осталось лишь суметь получить координаты подгружаемых элементов.

[Константин]

KorniloFF,
2) в jQuery есть стандартный перехватчик события Ajax.success, его аналог на чистом JS, ото обработка статуса ответа, т.е. примерно там, где у тебя рендеринг JSON данных в страницу. Достаточно в этом месте вызвать то же самое, что подцеплено на onload. Т.е. тупо сделать функцию типа doOnload, которая вызывается и там и там.
3) В основном для обхода ограничений кроссдоменных используется, но изначально придуман он был именно для подгрузки данных вообще, в том числе и для подгрузки немедленно исполняемых функций. И это дает преимущество: можно тяжелые обработчики, уникальные для подгружаемого блока, например, положить на субдомен. Т.е. у страницы может быть загружена своя спецефичная рендерилка, свои обработчики onload. В этом случае браузер такой обработчик будет грузить в параллель, что собс-но дает неплохое снижение времени загрузки.

[Павел Корнилов]

2. Именно этим путём я и пытался идти, пока не уткнулся в тупик, не позволяющий это сделать универсально. Дело в том, что броузер не дает доступа к списку висящих на элементе обработчиков. Иначе все было бы куда проще.
3. Тут ничего однозначного сказать не могу, нужно глубже будет вопрос изучить. Возможно, там решение и найдётся.

Пока использую костыль, который мне самому не нравится. А именно, собираю в массив все отложенные функции, а потом исполняю их в той же очередности по success. Но такой подход имеет кучу минусов, и не всегда для меня годится.

Если Вам интересна тема, давайте уйдём в

почту

[e-mail]

.