Usercript 访问动态生成的(Vaadin 框架)内容

Question

我想在javascript中访问Vaadin引导程序生成的DOM元素。比方说页面：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());
});

甚至在"控制台"命令中(如果加载了带有上述脚本的页面(，例如：

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

每次我们得到

undefined

我们如何让用户脚本看到这段代码？

Answer 1

与：AJAX 请求上的 Fire Greasemonkey 脚本密切相关。

用户脚本在加载.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() );
}

密切注意元数据块，因为问题代码在那里有错误。