用户脚本访问动态生成的（Vaadin 框架）内容

Question

我想在 javascript 中访问 Vaadin bootstrap 生成的 DOM 元素。假设页面：https://vaadin.com.

如果您在 Chrome > inspect element 中检查网站内容，一切似乎都很好。我们可以在 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 script on AJAX request。

用户脚本在 .front-page-view 节点 is/are 加载之前很久就触发了。所以，现有的代码什么也看不到。

以下是如何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() );
}

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

用户脚本访问动态生成的（Vaadin 框架）内容

Usercript access to Dynamically generated (Vaadin framework) content

javascript

greasemonkey

userscripts

tampermonkey