java - 将 Javascript 代码插入脚本元素以设置窗口栏

Question

在 GWT 中，如何将此 Javascript 制作为 ScriptElement:

<script type="text/javascript">
var addthis_config = addthis_config||{};
addthis_config.pubid = 'YOUR-PUBID';
$.getScript( "https://s7.addthis.com/js/300/addthis_widget.js#domready=1");
</script>

我知道的解决方案是:

  ScriptElement script = doc.createScriptElement();
  script.setSrc("https://s7.addthis.com/js/300/addthis_widget.js#domready=1");

但是 addthis_config 和 addthis_config.pubid 怎么样？

Answer 1

创建 ScriptElement 后，您必须将其注入(inject) DOM 才能加载第 3 方脚本，但这不是加载脚本的正常方法GWT。

通常在 GWT 中我们使用 ScriptInjector，但在您的情况下，您必须使用之前的一些 JSNI 代码来设置窗口对象中的这些变量:

final static String AT_PUBID = "YOUR-PUBID";
final static String AT_URL = "https://s7.addthis.com/js/300/addthis_widget.js#domready=1";

public void onModuleLoad() {
  setAddthisId(AT_PUBID);
  ScriptInjector.fromUrl(AT_URL).inject();
}

private static native void setAddthisId(String id) /*-{
  $wnd.addthis_config = $wnd.addthis_config||{};
  $wnd.addthis_config.pubid = id;
}-*/;

您甚至可以使用 ScriptInjector 将 javascript 代码作为字符串注入(inject)，但在我看来，这是一个令人讨厌的解决方案，因为 GWT 编译器无法执行任何 JSNI 语法检查:

....
ScriptInjector.fromString(
   "$wnd.addthis_config = $wnd.addthis_config||{};" +
   "$wnd.addthis_config.pubid = '+ " AT_PUBID + "';"
).inject();
ScriptInjector.fromUrl(AT_URL).inject();

如果您实际上不想使用 JSNI 以避免处理 javascript 错误，我建议使用 gwtquery库，除了数十个功能之外，它还允许您使用非常简单的语法来操作 DOM 元素:

import static com.google.gwt.query.client.GQuery.*;
....

$(window).prop("addthis_config", $$("pubid: " + AT_PUBID));
ScriptInjector.fromUrl(AT_URL).inject();