Как получить доступ к содержимому DOM, подгружаемому через Ajax на сайте vk.com?

Question

[SmartReptiloid]

Эта функция

(function() {
'use strict';
    var content = document.getElementById('content');
    var profileName = document.createElement('span');
    profileName.className = 'Profile_Name';
    if (document.getElementById('profile')) {
        content.insertBefore(profileName, content.firstChild);
        profileName.textContent = document.getElementsByTagName('title')[0].textContent;
    }
})();

выполняется только после перезагрузки страницы или при открытии в новой вкладке, а мне нужно, чтобы текстовое содержимое извлекалось и выводилось сразу на странице запрошенной страницы профиля ВК. Значит, нужно получить содержимое тега title из кода, подгруженного через Ajax. А как это сделать?

Comments

[ThunderCat]

Вы бы объяснили что это и зачем, похоже на какой-то плагин для браузера, это оно?

[SmartReptiloid]

ThunderCat, юзерскрипт для старого дизайна ВК. Цель - создать и внедрить в DOM элемент span и показывать там имя профиля в верхней полоске.

[DanKud]

SmartReptiloid, самый простой вариант это чекать подгрузку данных из AJAXа через setInterval(). Или можно отследить изменения в элементе, в который подгружаются данные, через MutationObserver()

[SmartReptiloid]

DanKud, вот про эти методы мне попадалась инфа по гуглу, но я так и не понял, как конкретно их применять. Бегло читал, опасаясь, шо не то.

Answer 1

[xmoonlight]

MutationObserver

var targetNode = document.querySelector("#someElement");
var observerOptions = {
  childList: true,
  attributes: true,
  subtree: true //Omit or set to false to observe only changes to the parent node.
}

var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

UPD: здесь с проверкой работы старым и новым способом.

Comments

[SmartReptiloid]

скажу честно, сути сего ивента я так и не понял. Как с тобой связаться в ВК?

[xmoonlight]

SmartReptiloid, Я направляю, но не обучаю. Понял? Учитесь - вы сами!

[SmartReptiloid]

xmoonlight, а приём точно должен сработать?

[xmoonlight]

SmartReptiloid, Точно! Документация - не врёт! Проверь!

[SmartReptiloid]

xmoonlight, вижу, ответ поменялся. Ты может проверял на деле, или и это тоже только теоретически должно помочь?

[xmoonlight]

SmartReptiloid, предыдущий метод - устарел, но он тоже ещё поддерживается. А этот - новый.
Вот поддержка: https://caniuse.com/#feat=mutationobserver
Вот ещё статейка по обнаружению изменения DOM-ветки при загрузке страницы: ryanmorr.com/using-mutation-observers-to-watch-for...

Не сижу в ВК, код не проверял. Это всё на теории пока что...

[SmartReptiloid]

xmoonlight, ну вот я такое нацарапал

(function () {
    var content = document.getElementById('content');
    var profileName = document.createElement('span');
    profileName.className = 'Profile_Name';
    var observer, callback;
    callback = function(mutations){
    profileName.textContent = mutations.characterData;
    }
    observer = new MutationObserver( callback );
    var options = {
    'characterData': true}
    var target = document.querySelector('title');
    observer.observe (target, options);
    if (document.getElementById('profile')) {
        content.insertBefore(profileName, content.firstChild);
    }
})();

но выскочила ошибка ""Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'."" -- я в недоумении.
Руководствовался здесь "https://frontender.info/mutation-observers-tutoria..."

[xmoonlight]

SmartReptiloid, временно удалите всё из функции и вставьте следующий код:

(function () {
    target = document.querySelector('title');
    console.log(target);
}
})();

Если там будет Undefined, то значит объект на момент вызова функции - отсутствует.
Это означает, что нужно брать ноду выше, чем сам title.

[SmartReptiloid]

xmoonlight, какая-то странная шняга получается, особенно с конкатенацией
1) если console.log(target); то в консоль выводится две строки: собственно <title>Иван Иванов</title>, а второе - null
2) при конкатенации console.log(target + "QWERT"); результат
[object HTMLTitleElement]QWERT
nullQWERT

​Именно благодаря конкатенации и выяснилось, шо в консоль выводится два раза от одной команды. Если шо, сама функция вписана в юзерскрипт, расширение Tampermonkey. А полный код выглядит так:

(function() {(function(context, fapply, console) {with (context) {(function(module) {"use strict";try {
fapply(module, context, [,,context.CDATA,context.uneval,context.define,context.module,context.exports,context.GM,context.GM_info]);} catch (e) {if (e.message && e.stack) {console.error("ERROR: Execution of script 'funcProfileName' failed! " + e.message);console.log(e.stack.replace(/(\\(eval at )?<anonymous>[: ]?)|([\s.]*at Object.tms_[\s\S.]*)/g, ""));} else {console.error(e);}}
})(function (context,fapply,CDATA,uneval,define,module,exports,GM,GM_info) {

// ==UserScript==
// @name         funcProfileName
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       vk.com/author
// @match        *vk.com/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
 var target = document.querySelector('title');
    console.log(target + "QWERT");
})();
})}})(this.context, this.fapply, this.console);
}).apply(window["__u__8935344.244936315_"])

[xmoonlight]

SmartReptiloid, Так нужно: console.log('[' + target.innerHTML + ']');
А если там null бывает, то обрабатывать только тогда, когда target.innerHTML не пустая строка. И всё!

[SmartReptiloid]

xmoonlight, ну, а где шо поменять нужно, чтобы observe сработало?

[xmoonlight]

SmartReptiloid, ну тут лучше поучиться тебе: https://learn.javascript.ru/onload-ondomcontentloaded и сам напишешь.

[SmartReptiloid]

xmoonlight, мне это уже всё надоело. Даже не ожидал, шо Javasсript настолько корявый язык.

[xmoonlight]

SmartReptiloid, НЕ ТО СЛОВО! Я даже вопрос тут задал, являясь куратором! Полное удаление созданной JS-функции с освобождением памяти в DOM. Есть ли реально рабочий код?

[SmartReptiloid]

xmoonlight, а ты пробовал когда-нибудь связываться с самими разработчиками языка? может у них предусмотрена обратная связь для особо тяжёлых случаев?

[xmoonlight]

SmartReptiloid, ни думаю, что они не в курсе происходящего, хотя - мысль неплохая.

Answer 2

[War1ock1994]

Можешь через jquery добавить листнер на апдейт дома, причём сам укажешь какая нода тебя интересует.

Comments

[SmartReptiloid]

К сожалению, не знаком с jQuery. Пока что по крайней мере.

[War1ock1994]

SmartReptiloid, смотри что товарищи с MDN советуют.

element.addEventListener("DOMNodeInserted", function (event) {
// ...
}, false);

вклянчи куда нибудь или поищи по DOMNodeInserted, примеров тьма, иногда реально может тебя спасити такая вещь.