javascript - GWT JSNI 找不到最近创建的元素

Question

我想在我的 gwt 代码中创建一个 canvas 元素。随后，我想应用第三方 javascript 库以便在新创建的 canvas 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中。添加新 Canvas 后，我想应用 JSNI 来获取此 Canvas 元素。

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

现在，我希望我已经找到了这个 Canvas 元素。但是，我在控制台上得到以下输出:

Canvas? = null

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

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

Answer 1

应该是:

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

在文档之前添加$wnd。

并考虑使用 JsInterop 而不是 JSNI。