GWT JSNI 找不到最近创建的元素答案

【问题标题】：GWT JSNI does not find recently created elementGWT JSNI 找不到最近创建的元素
【发布时间】：2017-10-30 11:22:25
【问题描述】：

我想在我的 gwt 代码中创建一个画布元素。随后，我想应用第三方 javascript 库以便在新创建的画布 dom 元素上进行绘制。所以这是我想做的粗略想法：

public void onModuleLoad() {
        Canvas canvas = Canvas.createIfSupported();
        canvas.getElement().setId("canvas");
        canvas.setWidth("800px");
        canvas.setHeight("500px");
        canvas.getElement().getStyle().setProperty("border", "black solid 1px");

        RootPanel.get("rootDiv").clear();
        RootPanel.get("rootDiv").add(canvas);

        getCanvas();

上面的代码创建了一个新的 canvas 元素并将它添加到我当前的 dom 中。添加新画布后，我想应用 JSNI 来获取此画布元素。

public static native void getCanvas() /*-{
    console.log("Canvas? = " + document.getElementById("canvas"));
}-*/;

现在，我希望我找到了这个画布元素。但是，相反，我在控制台上得到以下输出：

Canvas? = null

为什么我无法访问我的新元素？

顺便说一句：当我在 Chrome 的检查器中检查 DOM 时，我可以看到添加的带有指定 ID 的画布元素。

【问题讨论】：

标签： javascript gwt jsni

【解决方案1】：

应该是：

public static native void getCanvas() /*-{
    console.log("Canvas? = " + $wnd.document.getElementById("canvas"));
}-*/;

在document之前添加$wnd。

并考虑使用 JsInterop 而不是 JSNI。

【讨论】：

谢谢，这解决了问题。关于 JsInterop：我看不出我应该如何在我的情况下应用它。至少我不了解 JsInterop 的文档或好处。这个 luigi 家伙推荐的教程都不是。我的意思是，我想访问第三方库的功能。
在您的情况下，elemental2 已经有您正在进行的两个调用，console.log 和 document.getElementById。编写 JSNI 来调用第三方库与编写 JsInterop 来调用它一样困难，除了 JSNI 将在 gwt 3 中停止工作，并且不像 JsInterop 那样类型安全。