2

我创建了一个简单的 Javascript 文件，其中包含一个简单的按钮。

function testfuncion() {
    document.write('<input type="button" name="hello" value="hello">');
}

然后我在 gwt 中创建了一个 HTML 面板。

HTML panelHtmlTry = new HTML();

怎样才能把Javascript按钮放到HTML面板中？

在这个实验中，我无法在 gwt 中创建按钮，而只能将 Javascript 对象放入 gwt 面板中。

PS：我可以使用 html 面板或水平面板。我的目标是在每个 GWT 面板上放置一个 javascript 按钮并显示它

4

3 回答 3

1

是的，有一种更简单的方法可以做你想做的事。但如果你想做你想做的事。您可以通过 JSNI 调用自定义 JavaScript 方法。

此 JSNI 方法调用您的自定义 JS 脚本，该脚本包含在主机页面中。

private native void testfunction() /*-{
  $wnd.testfuncion();
}-*/;

$wnd 是对浏览器window对象的引用，请参阅GWT Docs on JSNI

然后你可以在你的 GWT 代码的任何地方调用这个 JSNI 方法：

testfunction();

每次，文件中的 JavaScript 函数都会通过 JSNI 调用。

您可以临时重新定义 document.write，以便它在HTML您希望的小部件中设置按钮。

private native void testfunction(HTML html) /*-{
  var originalWriteFunc = $wnd.document.write;
  $wnd.document.write = function(str) {
    html.@com.google.gwt.user.client.ui.HTML::setHTML(Ljava/lang/String;)(str);
  };

  $wnd.testfuncion();
  $wnd.document.write = originalWriteFunc;
}-*/;

因此，您需要使用 HTML 小部件调用 testfunction，该小部件应放置在按钮所在的位置。

于 2012-12-30T10:20:43.733 回答
1

鉴于不允许对 JS 文件进行修改，并且假设是documentinput 中唯一input的，您可以扩展HTML以包装input元素：

public class MyInputHtml extends HTML {

    public MyInputHtml() {

        // initialize DOM with external script content
        testfunction();

        // set the DOM element as the widget's element
        Element body = RootPanel.get().getElement();
        Element el = body.getElementsByTagName("input").getItem(0);
        setElement(el);
    }

    private native void testfunction() /*-{
        $wnd.testfuncion();
    }-*/;
}

当然，最好将 分配input给id. 这样你就可以通过调用来查找它RootPanel.get(id)，从而避免了基于索引的搜索。这将使您的代码更加健壮，因为 DOM 中的更改不会影响此查找。

于 2012-12-30T11:02:59.043 回答
0

让您的 testFunction 返回一个字符串。这可以插入到您的 panelHtmlTry 中。

于 2012-12-30T10:04:56.730 回答