GWT 和 JSNI 将 Javascript 按钮添加到 HTML 面板中答案

【问题标题】：GWT and JSNI add Javascript button into HTML panelGWT 和 JSNI 将 Javascript 按钮添加到 HTML 面板中
【发布时间】：2012-12-30 09:57:03
【问题描述】：

我创建了一个包含一个简单按钮的简单 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 按钮并显示它

【问题讨论】：

你想达到什么目的？最有可能的是，有一种更简单的方法来做你想做的事。
我有很多由其他人创建的 .js 文件（包含按钮、文本或其他对象作为图像等），我无法修改它，我必须创建一个带有 gwt 面板的 UI，添加gwt 面板上的这个 .js 文件。
安全性怎么样？任何人都可以简单地将任何内容放入这些脚本文件中吗？有冲突的脚本怎么办？再考虑一个文件，与此处介绍的文件相同 - document.write() 调用将相互覆盖，从而重建 DOM。
你确定这个 JS 生成 HTML 吗？还是有一个 HTML 文件和一个与这个 HTML 一起工作的 JS？如果您可以将 HTML 与 JS 分开（这始终是正确的做法），那么解决方案比您尝试的要简单得多。
是的，js 创建了一个简单的按钮，我将此按钮添加到 GWt 面板中我该怎么做？

标签： java javascript gwt jsni

【解决方案1】：

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

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

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

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

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

testfunction();

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

您可以临时重新定义 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，按钮应该放置在哪里。

【讨论】：

这个方法覆盖我用gwt创建的所有面板，还有其他解决方案吗？
这是 document.write 的行为，你需要通过 id 或 sth 将按钮显式插入到元素中。（或者应该在哪里自动插入按钮？）
我在所有页面中有很多 html 面板，但只有一个我必须插入 javascript 按钮，当我打开页面时它必须自动插入
查看更新的答案，您可以在 html 小部件中给出按钮应该放置的位置，尽管这很臭，显然不是一个好的做法。
我不明白我将 html 面板传递给原生方法？不是相反吗？将本机方法传递给 html 面板？

【解决方案2】：

鉴于不允许对 JS 文件进行修改，并且假设 input 是文档中唯一的 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 中的更改不会影响此查找。

【讨论】：

对不起，我不明白我在哪里调用 javascript 函数？
您必须在构建此类时激活它，请参阅更新后的答案。
我没有将 javascript 面板附加到 rootpanel 上，而是附加到自定义 gwt 面板（html 面板或水平面板）
您可以将其附加到您希望的任何面板（例如，通过调用somePanel.add(MyInputHtml)，与RootPanel 关联的调用用于查找本机input 元素。
当我编译时，我在 myInputhtml 类上收到很多错误。我不想全部附加到 rootpanel 我有一个附加在 root 面板上的面板。

【解决方案3】：

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

【讨论】：

在我的实验中我不能对javascript文件做任何修改