按钮onclick和href之间的区别

我试图将SendOwl购物车整合到我的应用程序中（应用程序的详细信息在最后）。按钮onclick和href之间的区别

为了演示这个问题，我使用纯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：打开结帐形式在它自己的窗口（不希望的行为）：

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

屏幕截图1：注意网址已更改，它不是覆盖图（与2相比）。

实施例2：打开在模式窗口作为覆盖（期望的行为）结帐形式：

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

截图2：URL保持相同，但形式在一个打开覆盖。

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

我的应用程序基于GWT（SmartGWT是精确的）。在我的应用程序中，我调用button onclick处理函数调用一个使用JSNI调用调用Buy Now链接的Javascript（如下所示）。但是“立即购买”链接总是在完整窗口中打开，如上面的示例1所示。

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

我试过$wnd.open(url)但它有相同的行为。

我如何得到第一个例子像第二个那样行为但仍然使用onclick按钮？

UPDATE：

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

谢谢。

来源

2016-03-01 DFB

要在新窗口中打开经典href，您可以使用'target =“_blank”' – NiKoLaPrO

这不是问题。我知道如何在新窗口中打开链接。 href示例（＃2）是所需的行为。要求是保持在同一个窗口中，并在当前窗口的叠加层中显示结帐表单。如果我可能要求您转到SendOwl演示页面（https://www.sendowl.com/demo）并点击信用卡演示按钮以查看它是如何工作的。希望这会使需求更加清晰。 – DFB

我加了答案，可以帮你 – NiKoLaPrO

我通过探究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>

感谢所有谁回答，并试图帮助。

来源

2016-03-01 12:17:34 DFB

所有你需要的是：

<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

工作正常，我。

来源

2016-03-01 04:33:19 NiKoLaPrO

其实我已经试过这种方法了。没什么区别。表单只显示在同一个窗口中，但不像示例2中那样叠加显示，也显示在我上面的注释中链接到的sendowl演示页面上。我会添加几个截图来显示问题。尽管感谢您的帮助。 – DFB

我添加了屏幕截图，使其更加清晰。 – DFB

@DFB想通了，我现在将回答 – NiKoLaPrO

在GWT中，您可以使用PopupPanel来显示叠加层。个人而言，我从来没有试图嵌入的弹出式内页，但你可以尝试添加一个Frame对象的弹出面板内，这样的事情：

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

对于URL请检查documentation这thread

来源

2016-03-01 07:38:57

谢谢。其实我已经在SmartGWT中尝试过这种方法，它在某种程度上有效，但有一些小故障。我使用了SGWT的模式窗口，它与您所建议的类似。在SGWT的模态窗口中运行时，结帐表单内的一些操作会导致javascript错误。无论如何，如果我找不到更清洁的解决方案，我必须采用这种方法。我真的想用纯HTML/Javascript术语来理解我的例1和例2中的差异，将GWT放在一边。 – DFB

按钮onclick和href之间的区别

回答

相关问题