Question

我正在尝试将SendOwl购物车集成到我的应用程序中（应用程序的详细信息在最后）。

为了演示问题，我使用纯HTML / Javascript创建了一个简单的代码段。在HTML的head部分，我有这个：

<script type="text/javascript">
    function SendOwl(url) {                 
        window.location.href=url;
    }
</script>
<script type="text/javascript" src="https://transactions.sendowl.com/assets/sendowl.js" ></script>

在身体里我有这个：

示例1：在自己的窗口中打开结帐表单（不期望的行为）：

<input type="button" onclick="SendOwl('https://transactions.sendowl.com/products/8/5C080C0F/purchase');" value="On Click" />

屏幕截图1：注意URL已更改且不是叠加层（与2相比）。

示例2：在模态窗口中打开结帐表单作为叠加层（所需行为）：

<a href='https://transactions.sendowl.com/products/8/5C080C0F/purchase'>a href</a>

屏幕截图2：网址保持不变，但表格会以叠加方式打开。

您还可以在SendOwl的演示页面上看到现场演示。

我的应用程序基于GWT（准确地说是SmartGWT）。在我的应用程序中，我调用按钮onclick处理程序来调用使用JSNI调用调用立即购买链接的Javascript（如下所示）。但是，“立即购买”链接始终在完整窗口中打开，如上面的示例1所示。

public static native void onBuyNowClick(String url) /*-{
  $wnd.SendOwl(url);
}-*/;

我尝试过$wnd.open(url)，但行为相同。

如何让第一个示例表现得像第二个但仍然使用按钮onclick？

更新：

魔术在sendowl.js脚本中。如果我删除该脚本，则两个示例的工作方式相同。如果我能弄清楚该脚本的工作原理，可能会提供一些线索，使示例1的工作方式与示例2相同。

感谢。

Answer 1

我已经通过探究sendowl.js解决了这个问题。这是完成所有魔术的剧本。

这是我修改后的脚本，它使示例1与示例2完全相同：

<script>
    function SendOwl(url) { 
        sendOwl.addLoadingImage();
        sendOwl.loadIframe ('https://transactions.sendowl.com/products/8/5C080C0F/purchase');
    }
</script>
<script src="https://transactions.sendowl.com/assets/sendowl.js"></script>

感谢所有回复并试图提供帮助的人。

Answer 2

您只需要：

<script type="text/javascript" src="https://transactions.sendowl.com/assets/sendowl.js" ></script>
<a href="https://transactions.sendowl.com/products/8/5C080C0F/purchase" rel="nofollow"><input type="button" value="Purchase" /></a>

https://help.sendowl.com/help/article/link/button-codes-to-sell-your-product

对我来说很好。

Answer 3

在GWT中，您可以使用PopupPanel来显示叠加层。就个人而言，我从未尝试在弹出窗口中嵌入页面，但您可以尝试在弹出式面板中添加Frame对象，如下所示：

PopupPanel popup = new PopupPanel();
Frame frame = new Frame("http://www.yourlink.com/");
popup.setWidget(frame);
popup.setGlassEnabled(true);
popup.center();

关于网址，请查看documentation和此thread

按钮onclick和href之间的区别

3 个答案: