无法在Vaadin网站上嵌入Javascript应用程序

Question

我目前正在扩展这个（https://github.com/frankskol/AdaptiveTesting2/tree/master）自适应测试站点，该站点使用Vaadin 7来包含一个带有Geogebra问题的模式。这里的相关类是DefaultView和GeogebraTestView。问题是我无法运行应用程序。根据Geogebra wiki（https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_Embedding），App嵌入有四个步骤。

1）将信息添加到head部分的meta中

2）包括javascript库deployggb.js

3）在页面上为GeoGebra应用程序创建一个元素

4）配置并插入应用程序

我的问题是在第4步，因为我无法获得Javascript执行。

步骤1和2已经在方法servletInitialized()中的defaultView中完成。可以在头部看到库和元配置。对于第3步，我使用div创建了一个新标签并添加了它。也可以在代码HTML中看到，这应该是有效的。对于第4步，我使用脚本创建了一个String，并尝试使用Page.getCurrent().getJavaScript().execute(script.toString());执行它，如下所示：https://vaadin.com/forum/thread/791748/how-to-add-javascript-file-and-in-script-tags但是，应用程序仍然没有出现在页面上。

JavaScript.getCurrent().execute("alert('Hello')");也不起作用，另一个解决方案，getApplication().getMainWindow().executeJavaScript(script.toString());似乎在这里不起作用，因为该程序不承认getApplication或getMainWindow()。

Label ggbElement = new Label("<div id=\"ggb-element\"></div>",ContentMode.HTML);
addComponent(ggbElement);

StringBuilder script = new StringBuilder();
script.append("var ggbApp = new GGBApplet({\"appName\": \"graphing\", \"width\": 800, \"height\": 600, \"showToolBar\": true, \"showAlgebraInput\": true, \"showMenuBar\": true }, true);")
            .append("  window.addEventListener(\"load\", function() { ggbApp.inject('ggb-element');\n" +
                        "    });");
//execute Javascript
JavaScript.getCurrent().execute(script.toString());
//or
//Page.getCurrent().getJavaScript().execute(script.toString());

预期的结果将是Geogebra App出现在页面上，如Geogebra Wiki中的一个Live示例中所示，但实际结果只是空白页面。

Answer 1

问题可能是您提前调用JS（页面尚未加载，没有附加组件）。我不确定Geogebra，但是尝试在Label的attachListener上执行你的JavaScript，如下所示：

Label lb=new Label();
lb.addAttachListener(e->{
JavaScript.getCurrent().execute("YOUR SCRIPT");
});

至少，像JavaScript.getCurrent().execute("alert('Hello')");这样的通用JS命令应该可以在那里工作。