Question

如果用户试图以任何方式完成订单流程，我当然希望实施一个警告，当然其他方式是付款按钮。

这样的事情：

<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，人们都是愚蠢的。不要采取粗鲁或悲观的态度。基本上，这个想法是假设每个人都对你的设计，教学都很愚蠢，这样你就可以轻松做出一个五岁的孩子可以做到的事情。我完全同意不让用户成为人质。但是这个页面只是在他们发起的预定订单流程的中间达到（这个页面永远不会以浏览的方式到达）。所以我认为这是一个非常合理的用例，你可以从中保存一个常见的用户错误。一个不懂技术的客户人群，所以他们真的需要这样的指导。

Answer 1

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。

DEMO：http://jsfiddle.net/DerekL/GSWbB/show/

Answer 2

不要这样做。

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

我建议您通过内联消息向用户说明订单尚未提交但他们仍然需要确认他们的操作，但如果他们不小心导航，您应该很容易从他们离开的地方继续前行。将这些信息存储在cookie中是相当简单的，这样在随后的页面访问中，用户将会被提示“你有一个不完整的订单......，你想现在完成它吗？”

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

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

另一个更新：

Derek对Gmail等使用此方法的评论提示，我发现an article建议您坚持使用onunload而是依靠AJAX调用来保存页面状态 - 这支持了我的想法，即使javascript事件从未被触发，也允许用户选择他们离开的位置。

保持页面警报，除非单击提交按钮

2 个答案:

另一个更新：