从 gwt 调用 javascript throws undefined is not a function答案

【问题标题】：calling javascript from gwt throws undefined is not a function从 gwt 调用 javascript throws undefined is not a function
【发布时间】：2014-04-28 09:20:09
【问题描述】：

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

<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

【问题讨论】：

标签： java javascript jquery gwt

【解决方案1】：

正如您在official dev guide for JSNI 中所读到的，您必须在此处添加$wnd：

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

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

【讨论】：

@apanizo 的其他方式 - GWT 应用程序在不同的“窗口”（实际上是 iframe）中运行，因此“真实”窗口被称为 $wnd。这意味着两个混淆的 GWT 应用程序不会意外地相互引用，或者一个 JS 应用程序不会被 GWT 编译函数混淆。 $doc 而不是文档也是如此。 window.alert 在某些浏览器中仍然有效，因为这些浏览器不关心警报功能在哪个窗口被调用。
好答案@ColinAlworth

【解决方案2】：

试试

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

而不是

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

【讨论】：