在GWT JSNI中使用jQuery

Question

我不能使用

$("#"+profileId).offset().top

在我的GWT JSNI函数内部，我尝试了这个

$wnd.$("#"+profileId).offset().top

但这也不起作用。我觉得我在这里缺少语法。有人可以帮忙吗？

- javalearner

---

你的JSNI方法的完整代码是什么（返回类型，参数等）？你在index.html中加载了jquery.js吗？当你的代码执行时是否有任何错误？ - user1711180

Answer 1

这个问题有三种解决方案：

1- 你的Jsni代码看起来很好，只需要将它封装在相应的本地函数中并返回一个double（或任何其他数字类型，如果你想让gwt进行转换）。

 native double getTop(String profileId) /*-{
   return $wnd.$("#" + profileId).offset().top;
 }-*/;

如果您想通过UncaughExceptionHandler查看错误，您应该将代码包装在$entry块中。

native  double getTop(String profileId) /*-{
  return $entry(function(data) {
    return $wnd.$("#" + profileId).offset().top;
  });
}-*/;

2- 但是，我建议您使用gwt-query（也称为gQuery），而不是使用jQuery。这样您不需要在.html文件中加载jQuery，也不需要在应用程序中处理jsni。

使用gQuery，您几乎可以使用与jQuery相同的语法，但是使用Java语言，因此您可以获得类型安全、重构、测试等优点。但是，您还将拥有许多实用工具（最简单的ajax、promises、选择器等），这些工具不在gwt核心中。

gQuery是一个轻量级库，完全从头开始用gwt重新编写。它不是jQuery库的包装器（就像其他答案中错误地说的那样），因此您不必在页面中包含jquery.js。

与任何其他gwt库一样，gwt编译器会从gquery中删除您不使用的所有内容。在您的方法中，您的应用程序必须加载所有jquery内容。

因此，在您的情况下，使用gquery在您的.java类中编写此代码：

import static com.google.gwt.query.client.GQuery.*;
... onModuleLoad() {
   int top = $("#"+profileId).offset().top;
}

3- 最后，如果你知道一个元素的id，你可以使用纯gwt代码来获取其偏移量:

int top = DOM.getElementById(profileId).getOffsetTop();

- Manolo Carrasco Moñino

---

JS只有一种数字类型，因此从jsni返回数字的自然方式是使用双精度浮点数，否则GWT必须处理强制转换（当然，您可以更改方法签名并返回int，让GWT进行强制转换）。 Gquery返回一个int，因为这是GWT中getOffsetTop()返回的内容，我们委托它来计算元素的顶部。 - Manolo Carrasco Moñino

这是在 $entry 块中的语法错误吗？你似乎没有关闭函数包装。 - Eliran Malka

Answer 2

一种简单的方法是使用谦虚的eval函数。

public static native void eval(String toEval)/*-{
   return $wnd.eval(toEval);     
 }-*/;

那么只需使用您的脚本即可。

eval("$('#'" + profileId + ").offset().top" );

因为它在你的GWT代码中被调用，所以你可以认为它是一个安全的代码。

- Daniel De León

---

这种方法的一个缺点是，您无法在发送到eval的字符串内容中获得任何IDE分析。因此，如果您在某个地方打错了字，或者调用了未定义的属性，直到运行时才会发现。 - Snake Verde

Answer 3

我假定您已经在您的宿主页面中添加了 jquery 库。

正确的语法是

private native int myJquery() /*-{
    $wnd.$(function() {           //may be you forgot this line
   return   $wnd.$("#"+profileId).offset().top;
    });
}-*/;

假设您刚开始在 GWT 中使用 jQuery。

我强烈建议使用一个轻量级的第三方库

GWTQuery

- Suresh Atta

---

感谢您提供的信息。 我正在尝试这样从jsni函数返回值，但是无法获得它。 codepublic static native int getIFrameTop(String profileId)/-{ $wnd.$(function() {
return $wnd.$("#"+profileId).offset().top
}); }-/;code - javalearner

请更新问题并提供完整的代码，你确定你的控制流程进入了JNSI内部吗？可以在第一行加上一个警告来检查。 - Suresh Atta

@Baddshah：你的JSNI代码除了引发错误之外什么也没做。在jQuery中，offset().top是一个属性，所以我猜用户想要根据传递的profileId获取这个值。请看我的答案。 - Manolo Carrasco Moñino

@Manolo 哈哈哈...先生，我想打自己一巴掌，因为我放错了链接。它是Gquery而不是Gwt jquery。 - Suresh Atta

没问题@Baadshah，它可行是因为我意识到了这个项目的存在。 - Manolo Carrasco Moñino