javascript - 在 GWT 中使用 jQuery 工具——有没有办法允许交换？

Question

我有一个 GWT 网络应用程序，其中包含几乎整页的 Google map 窗口。在 map 内部，我有包含链接的信息窗口。我想要做的是使用 jquery 工具叠加层 ( http://flowplayer.org/tools/overlay/apple.html ) 打开叠加层并在单击信息窗口内的链接后将其显示在 map 顶部。

现在，链接源是动态生成的，它托管在不同的服务器上，所以我必须在 iframe 中打开它并在打开之前设置 iframe 的源。这看起来很简单，因为我在页面上只有 1 个 iframe:

    function changeSource(url){
         $("#menuIFrame").attr("src",url);
    }

为了在打开叠加层之前调用它(在鼠标释放时完成)，我通过 GWT 在 google maps 信息窗口中创建了以下元素:

<a href="http://whatever.com/menu/" onClick="changeSource('http://whatever.com/menu/');" rel=#menu"> View menu </a>

Jquery 工具通过打开任何 div 来工作，该 div 的 id 分配给了“rel”的值，但是因为我在 GWT 中的 LandingPage.html 上有我的 javascript/jquery，所以两者之间似乎存在某种脱节，因为叠加层永远不会添加到窗口。

这是我的应用程序:http://truxmapper.appspot.com/

如您所见，其他叠加层可以正常工作，但是一旦您单击信息窗口并尝试查看菜单，它只会使用 href 在该窗口中打开 url。

有谁知道可以让我实现目标的解决方案吗？谢谢!

Answer 1

点击链接将在当前窗口中打开页面，因为没有什么可以阻止它。 onclick链接的处理程序需要返回 false 以防止发生默认操作(打开 url)。它应该看起来像:

<a href=".." onClick="changeSource(..); return false;" rel=#menu">View menu</a>

注意 changeSource 后返回 false叫做。或者你可以修改changeSource返回值本身并简单地返回 changeSource 返回的任何内容。 changeSource 函数如下所示:

function changeSource() {
    // do some work
    return false;
}

链接变为:

<a href=".." onClick="return changeSource(..);" rel=#menu">View menu</a>

这会阻止页面离开，并且应该会按预期工作。如果没有，则很可能是 jQuery 工具的问题。在我的测试中，弹出窗口没有默认显示为 <div class="menu_overlay">..</div>。被CSS隐藏了。我通过进一步修改 onClick 来进一步展示它:

onClick="$('.menu_overlay').show(); return changeSource(..);"