Question

我想通过javascript访问由Vaadin bootstrap生成的DOM元素。让我们说一页：https://vaadin.com。

如果您在 Chrome＆gt;中查看网站内容检查元素一切似乎都很好。我们可以在html元素之间导航，一切都很好。但内容不会显示在 Chrome＆gt;中查看页面来源。

无论如何，如果我们在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());
});

甚至在＆＃34; console＆＃34;命令（如果加载了上面脚本的页面），如：

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

每次我们

undefined

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

Answer 1

与Fire Greasemonkey script on AJAX request密切相关。

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

密切关注元数据块，因为问题代码存在错误。

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

1 个答案: