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

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

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

如何将Javascript按钮放入HTML面板

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

---

PS：我可以使用html面板或水平面板。我的目标是在每个GWT面板上放置一个javascript按钮并显示它，让testFunction返回一个字符串。您可以将其插入您的panelHtmlTry。

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

此JSNI方法调用宿主页面中包含的自定义JS脚本

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

$wnd是对浏览器

窗口
对象的引用，请参见

然后，您可以在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，按钮应位于该小部件的位置。
鉴于不允许对JS文件进行任何修改，并且假设
输入是文档中唯一的
输入
，您可以扩展
HTML
来包装
输入
元素：

公共类MyInputHtml扩展HTML{
公共myinputtml（）{
//使用外部脚本内容初始化DOM
testfunction（）；
//将DOM元素设置为小部件的元素
元素体=RootPanel.get（）.getElement（）；
元素el=body.getElementsByTagName（“输入”）.getItem（0）；
setElement（el）；
}
私有本机void testfunction（）/*-{
$wnd.testFunction（）；
}-*/;
}

当然，如果您使用
id
为
输入分配
将是最好的选择。这样，您只需调用
RootPanel.get（id）
，就可以查找它，从而避免了基于索引的搜索。这将增强您的代码的健壮性，因为DOM中的更改不会影响此查找。
您想要实现什么？最有可能的是，有一种更简单的方法来做你想做的事情。我有许多由其他人创建的.js文件（包含按钮、文本或其他对象如图像等），我不能修改它，我必须创建一个带有gwt面板的UI，在gwt面板上添加这个.js文件。安全性如何？有人可以简单地在这些脚本文件中放入任何内容吗？冲突脚本呢？简单地考虑另一个文件，与这里介绍的文件相同——<代码>文档.Wrror（）/Case>调用将重写，重构DOM。您确信JS生成HTML吗？或者有一个HTML文件和一个JS可以使用这个HTML？如果你能将HTML和JS分开（这总是正确的方法），那么解决方案比你尝试的要简单得多。是的，JS创建一个简单的按钮，我将这个按钮添加到GWt面板中，我该怎么做？这个方法覆盖了我用GWt创建的所有面板，有其他解决方案吗？这是document.write的行为，您需要将按钮显式地插入elment by id或其他内容（或者按钮应该自动插入到哪里？）我在所有页面中都有许多html面板，但只有一个页面中我必须插入javascript按钮，它必须在我打开页面时自动插入见更新的答案，您可以在html小部件中给出，按钮应该放在哪里，尽管这闻起来很难闻，显然不是一个好的做法。我不明白我把一个html面板传递给原生方法了吗？不是相反吗？将本机方法传递到html面板中？在我的实验中，我无法对javascript文件进行任何修改，但我不明白在何处调用javascript函数？在构造此类时，您必须激活它，请参阅更新的答案。我没有将javascript面板附加到根面板上，而是附加到自定义gwt面板中（html面板或水平面板）您可以将其附加到您想要的任何面板上（例如，通过调用
somePanel.add（myinputtml）
，与
RootPanel
关联的调用用于查找本机
输入
元素。当我编译时，我在类myinputtml上收到许多错误。我不想将所有内容都附加到RootPanel，我在根面板上附加了一个面板。
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;
}-*/;