GWT JSNI가 최근에 생성 된 요소를 찾지 못했습니다.

Question

gwt 코드에 캔버스 요소를 만들고 싶습니다. 그런 다음 새로 만든 캔버스 DOM 요소에 페인트하기 위해 제 3 자 자바 스크립트 라이브러리를 적용하고 싶습니다.

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(); 

위의 코드 조각은 새로운 캔버스 요소를 만들고 내 현재 DOM에 추가 : 그래서 여기에 내가하고 싶은 일의 거친 아이디어이다. 새로운 캔버스를 추가 한 후에 JSNI를 적용하여이 캔버스 요소를 얻고 싶습니다.

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

이제는이 캔버스 요소를 발견했을 것입니다. 그러나 그 대신 콘솔에 다음 출력이 표시됩니다.

Canvas? = null 

새 요소에 액세스 할 수없는 이유는 무엇입니까?

BTW : Chrome의 관리자에서 DOM을 확인하면 할당 된 ID가있는 추가 된 캔버스 요소를 볼 수 있습니다.

Answer 1

이 있어야한다 :

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

이 document 이전 $wnd를 추가합니다.

그리고 JSNI 대신 JsInterop을 사용하는 것이 좋습니다.