Пользовательский доступ к динамически генерируемому (Vaadin framework) контенту

Question

Я хотел бы получить доступ в javascript к элементам DOM, сгенерированным загрузчиком Vaadin. Допустим, страница: https://vaadin.com.

Если вы проверяете содержимое веб-сайта в Chrome> осмотреть элемент , все выглядит нормально. Мы можем перемещаться между HTML-элементами, и все в порядке. Но содержимое не будет отображаться в Chrome> просмотр источника страницы .

В любом случае, если мы запустим такой скрипт в Tampermonkey:

// ==UserScript==
// @name         TEST
// @namespace    http://tampermonkey.net/ 
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://vaadin.com/
// @requirehttp://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// ==/UserScript==

console.log($('.front-page-view'));

$(document).ready(function () {
    console.log($('.front-page-view').html());
});

или даже в команде "console" (если загружена страница с вышеуказанным скриптом), например:

$('.front-page-view').html();

каждый раз, когда мы получаем

undefined

Как мы можем заставить скрипт видеть этот код?

Answer 1

Близко относится к: Скрипт Fire Greasemonkey по запросу AJAX .

Пользовательский скрипт запускается задолго до того, как узлы .front-page-view будут загружены. Итак, существующий код ничего не видит.

Вот как waitForKeyElements компенсировать это ( полный рабочий скрипт ):

// ==UserScript==
// @name        Vaadin.com, show code of dynamic element
// @match       https://vaadin.com/*
// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       GM_addStyle
// @grant       GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

waitForKeyElements (".front-page-view", showNodeHTML);

function showNodeHTML (jNode) {
    console.log ("FPV html: ", jNode.html().trim() );
}

Обратите особое внимание на блок метаданных, поскольку в коде вопроса есть ошибки.