按钮 onclick 和 href 之间的区别

Question

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

为了演示这个问题，我使用纯 HTML / Javascript 创建了一个简单的片段。在 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：打开自己的结帐表单 window（不良行为）：

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

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

示例 2：在模态 window 中打开结帐表单作为覆盖（期望的行为）：

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

屏幕截图 2：URL 保持不变，但表单在叠加层中打开。

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

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

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

我试过 $wnd.open(url) 但结果是一样的。

如何让第一个示例的行为与第二个示例相同，但仍然使用按钮 onclick？

更新：

魔法就在 sendowl.js 脚本中。如果我删除该脚本，那么这两个示例的工作方式相同。如果我能弄清楚该脚本是如何工作的，它可能会提供一些线索，使示例 1 以与示例 2 相同的方式工作。

谢谢。

Answer 1

您只需要：

<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 2

在 GWT 中，您可以在弹出面板中使用 PopupPanel to display the overlay. Personally I never tried embedding a page inside a popup but you can try adding a Frame 对象，如下所示：

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

至于URL请查看documentation and this thread

Answer 3

我已经通过探索 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>

感谢所有回复和提供帮助的人。

按钮 onclick 和 href 之间的区别

Difference between button onclick and a href

javascript

gwt

jsni

smartgwt