Call javascript function from gwt. HTMLPane

Question

I've seen a lot of answers to a similar question, but have not found an answer to my question. There is a html page.

<body>
  <div id="text">some text</div>
  <script>
     function hide()
     {
         document.getElementById("text").style.display = "none";
     }
  </script>
</body>

The code in gwt

HTMLPane panel = new HTMLPane();
panel.setContentsType(ContentsType.PAGE);
panel.setContentsURL("pages/index.html");

public native void someMethod(HTMLPane panel)/*-{
    $doc.hide();
}-*/;

But nothing works. Tried to define the function as

document hide = function hideF()
{
    document.getElementById("text").style.display = "none";
}

and define a function in different positions, but nothing helped. Please help find the error, or say that it is impossible

It would help to let us know that you're using SmartClient's smartGWT. It took me a while to find a reference to their HTMLPane [http://www.smartclient.com/docs/8.3/a/b/c/go.html#class..HTMLPane]. What do you know that _does_ work? Can you call the hide function in the page body? When your gwt code sets the Contents URL, do you see it load the page? Does the line before whatever invokes `someMethod` execute? — Scott Mermelstein, Feb 19 '13 at 18:26

Eliran Malka · Answer 1 · 2013-02-21T09:20:38.843

0

hide() is a member of window — replace $doc with $wnd in the calling native method, i.e.:

public native void someMethod(HTMLPane panel)/*-{
    $wnd.hide();
}-*/;

If you insist on attaching it to document, leave the native method unchanged, but correct the function assignment:

document.hide = function()
{
    document.getElementById("text").style.display = "none";
}

edited Feb 21 '13 at 09:20

answered Feb 21 '13 at 09:12

Eliran Malka

15,821
6
77
100

score 0 · Answer 2 · edited May 23 '17 at 12:04

Problem is, HTMLPane uses an iframe when ContentsType.PAGE is used.
So, hide() is a function of child window in iframe.
If you must use ContentsType.PAGE, following works.

HTMLPane panel = new HTMLPane();
panel.setContentsType(ContentsType.PAGE);
panel.setContents("<iframe id='" + "id_internal_panel_1" + "' src='" + "pages/index.html" + "' style='border:none'/>");

// above use of iframe instead of using the one created by HTMLPane, could cause styling and other issues

// following did not work for me
// panel.setContentsURL("pages/index.html");
// panel.getElement().setId("id_internal_panel_1");
// panel.getElement().setPropertyString("name", "id_internal_panel_1");
// panel.getElement().setPropertyString("id", "id_internal_panel_1");

IButton button = new IButton("Hide");
button.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent clickEvent) {
        someMethod();
    }
});

public native void someMethod()/*-{
    $doc.getElementById("id_internal_panel_1").contentWindow.hide();
    // $wnd.document.getElementById("id_internal_panel_1").contentWindow.hide();

    // can use following with panel.setContentsURL("pages/index.html");, if ContentsType is not set to ContentsType.PAGE
    // $wnd.hide();
}-*/;

Set an ID to an iframe in a HtmlPane
Calling javascript function in iframe

Using too generic names like "hide/text" could lead to conflicts with other scripts/objects and result in strange behavior.

Call javascript function from gwt. HTMLPane

2 Answers2