Question

我需要将html模板中的javascript改编为我的gwt代码。头部的原始代码是：

<script src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/slimbox.js"></script>
<script type="text/javascript" src="assets/js/slider.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#slider").easySlider({
    auto: true,
    continuous: true,
    controlsShow:    false,
  });
});
</script>

和身体：

<div id="slider">
  <ul>
    <li><a href="#"><img src="myapp/img/01.jpg" alt="" /></a></li>
    <li><a href="#"><img src="myapp/img/02.jpg" alt="" /></a></li>
    <li><a href="#"><img src="myapp/img/03.jpg" alt="" /></a></li>
    <li><a href="#"><img src="myapp/img/04.jpg" alt="" /></a></li>
    <li><a href="#"><img src="myapp/img/05.jpg" alt="" /></a></li>
  </ul>
</div>

我在MyApp.jsp中链接了外部javascripts

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
  <script type="text/javascript" language="javascript" src="myapp/myapp.nocache.js"></script>
  <script type="text/javascript" language="javascript" src="myapp/js/jquery.js"></script>
  <script type="text/javascript" language="javascript" src="myapp/js/slimbox.js"></script>
  <script type="text/javascript" language="javascript" src="myapp/js/slider.js"></script>
</head>

然后我有MainPage.java，其创建由History

处理

public MainPage() {
    initWidget(uiBinder.createAndBindUi(this));
    RootLayoutPanel.get().clear();
    RootLayoutPanel.get().add(this);
    onLoadSlider();
}

public static native void onLoadSlider() /*-{
    $("#slider").easySlider({
    auto: true,
    continuous: true,
    controlsShow: false,
});
}-*/;

调用onLoadSlider函数会导致异常：onLoadSlider()([]): $ is not defined

然后我尝试使用window.top.document.getElementById("slider")代替$("#slider")，异常现在是onLoadSlider()([]): undefined is not a function

Answer 1

正如您可以在official dev guide for JSNI中阅读的那样，您必须在此处添加$wnd：

$wnd.$("#slider").easySlider({
    auto: true,
    continuous: true,
    controlsShow: false,
});

从JSNI访问浏览器的窗口和文档对象时，必须分别将它们引用为 $ wnd 和$ doc。您编译的脚本在嵌套框架中运行，$ wnd和$ doc会自动初始化，以正确引用主页的窗口和文档。

Answer 2

尝试

$wnd.parent.document.getElementById("slider")

而不是

window.top.document.getElementById("slider")

从gwt调用javascript throws undefined不是一个函数

2 个答案: