按钮 onclick 和 href 的区别

Question

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

为了演示这个问题，我使用纯 HTML / Javascript 创建了一个简单的 sn-p。在 HTML 的头部，我有这个：

<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：URL 保持不变，但表单以叠加方式打开。

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

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