19

如果用户尝试在订单流程完成之前以任何方式离开订单流程，我希望实施警告，当然除了付款按钮之后。

像这样的东西：

<script type="text/javascript">
window.onbeforeunload = function(){
return 'You must click "Buy Now" to make payment and finish your order. If you leave now your order will be canceled.';
};
if document.getElementsByClassName('eStore_buy_now_button').onclick = function(){
};
</script>

我确信这在某些方面是有害的错误，但这是我可以说明我正在尝试的最佳方式。而且我知道有些浏览器会显示默认文本而不是我写的实际警告，这很好。

一些注意事项，我宁愿使用普通的旧 JS 而不是加载 jQuery 来完成这个简单的任务。页面没有设置，是一个简单的离开页面或者点击“立即购买”操作。

更新：

我向你保证，这不是为了我，而是为了用户。尽管已经明确解释了（做什么），但我认为用户在该过程真正完成之前出于即时满足而匆忙离开，忽略消息的心态。这是一个简单的两步过程，他们提交项目的详细信息，然后付款。无论出于何种原因，他们都在提交详细信息，然后大约 50% 的时间没有完成付款。然后他们会跟进“那么，你是在做这个项目还是在做什么？” 然后我必须解释“你从来没有完成你的订单”。他们接着说“哎呀，给你。”

不幸的是，我将其归为营销和网页设计 101。规则 #1，人们是愚蠢的。不要被粗鲁或悲观地理解。基本上，这个想法是假设每个人在你的设计和指导上都是愚蠢的，这样你就可以做出一个 5 岁的孩子可以做到的简单事情。我完全同意不将用户作为人质。但是这个页面只能在他们发起的预定订单过程的中间到达（这个页面永远不会以浏览的方式到达）。因此，我认为这是一个非常合理的用例，您可以在其中避免自己的常见用户错误。不精通技术的客户群体，因此他们确实需要这样的指导。

4

2 回答 2

27 
document.querySelector('.eStore_buy_now_button').addEventListener("click", function(){
    window.btn_clicked = true;      //set btn_clicked to true
});

window.onbeforeunload = function(){
    if(!window.btn_clicked){
        return 'You must click "Buy Now" to make payment and finish your order. If you leave now your order will be canceled.';
    }
};

这将在页面卸载（例如离开页面）直到btn_clicked设置为时提醒用户true。

演示：http: //jsfiddle.net/DerekL/GSWbB/show/

于 2012-06-17T23:46:33.227 回答
0

不要这样做。

在可用性方面有一条细线 - 一方面，有时我可能打算下订单但不小心离开了页面；另一方面，它可能很快就会变得烦人。当浏览器设置为保存上一个会话（即在下次启动时重新打开选项卡）并且一个页面以这种方式运行时，您最终只会重新打开该选项卡（在 Mac Safari 上确认），丢弃其余的标签。他们不会再向你购买了！

我建议您通过内联消息向用户明确表示该订单尚未提交，他们仍需要确认他们的操作，但如果他们不小心导航离开，您应该轻松找到他们离开了。将此类信息存储在 cookie 中是相当简单的，以便在后续页面访问时提示用户“您有一个不完整的订单......，您想现在完成它吗？”

作为替代方案，如果用户分心，您可以使用不活动警报（想想在线银行在会话即将到期时提示您）将用户带回“完成订单”页面。

如果您确定要依赖此事件，则此问题的答案可能会提供更好的见解。基本上，不应依赖基本文本警告之外的功能或其实现，因为跨浏览器的实现不一致（？）以及被用户阻止的可能性。

另一个更新：

在 Derek 对 Gmail 等使用的这种方法的评论的提示下，我看到一篇文章建议您坚持使用onunload并依靠 AJAX 调用来保存页面的状态——这支持了我关于允许用户拿起的想法即使从未触发 javascript 事件，他们也离开了。

于 2012-06-18T00:35:34.263 回答