Оставить страницу оповещения, если не нажать кнопку "Отправить"

Я ищу, чтобы выполнить предупреждение, если пользователь пытается оставить процесс заказа до его завершения каким-либо другим способом, а затем, конечно, после кнопки оплаты.

Что-то вроде этого:

<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 только для этой простой задачи. На странице нет настроек, поэтому вы можете просто оставить страницу или нажать "Купить сейчас".

UPDATE

Я заверяю вас, что это не ради меня, это ради меня. Хотя явным образом объяснял (что делать), я думаю, что пользователь прыгает с пистолета и уходит до того, как процесс действительно завершен из мгновенного удовлетворения, игнорируйте сообщения типа менталитета. Это простой двухэтапный процесс, они предоставляют детали для проекта, а затем делают платеж. По какой-либо причине они отправляют детали, а затем не выполняют оплату примерно в 50% случаев. И тогда они последуют за этим: "Итак, вы работаете над проектом или что?" и тогда я должен объяснить: "Ты никогда не закончил свой заказ". Они следуют за "Упс, вот и я".

К сожалению, я бы назвал это маркетингом и веб-дизайном 101. Правило №1, люди немые. Не быть взят в грубом или пессимистическом смысле. В принципе, идея состоит в том, что все немыслимы в вашем дизайне, инструкции, чтобы вы сделали что-то настолько простое, что пятилетний может это сделать. Я полностью согласен с тем, что не удерживаю пользователей в заложниках. Но эта страница ТОЛЬКО достигается в середине их запланированного процесса заказа, который инициирует THEY (эта страница никогда не будет достигнута в режиме просмотра). Поэтому я считаю, что это довольно законный случай использования, когда вы спасаете обычную ошибку пользователя от себя. Демография клиентов, которые не являются технически подкованными, поэтому они честно нуждаются в таком руководстве.

Ответ 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/

Ответ 2

Не делай этого.

Существует тонкая линия с точки зрения удобства использования - с одной стороны, иногда я мог намереваться разместить заказ, но случайно покинул страницу; с другой стороны, это может раздражать довольно быстро. Когда abrowser настроен для сохранения предыдущей сессии (т.е. Повторно открывать вкладки при следующем запуске), и одна страница ведет себя таким образом, в итоге вы снова откроете эту вкладку (подтвержденную на Mac Safari), отбросив остальную часть вкладки. Они больше не будут покупать у вас!

Я бы посоветовал вам разъяснить пользователю с помощью встроенных сообщений, что заказ еще не отправлен, и им все еще нужно подтвердить их действие, но если они должны были случайно перемещаться, вы должны облегчить забрать, где они остановились. Было бы довольно тривиально хранить такую информацию в файле cookie, чтобы при последующих посещениях страницы пользователю было предложено "у вас есть неполный порядок для..., вы хотели бы закончить его сейчас?"

В качестве альтернативы вы можете использовать полагаться на предупреждение о неактивности (подумайте о том, что онлайн-банкинг подсказывает вам, когда истечет срок вашего сеанса), чтобы вернуть пользователя на страницу "полный заказ", если они отвлекаются.

Если вы уверены, что хотите полагаться на это событие, ответы на этот вопрос могут дать лучшее представление. В принципе, на функциональность или ее реализацию помимо основного текстового предупреждения нельзя полагаться из-за несогласованной (?) Реализации в браузерах, а также возможности ее блокировки пользователем.

Другое обновление:

Подсказка от Derek комментирует этот подход, используемый Gmail и т.д., я столкнулся с статьей, предлагающей вам придерживаться onunload вместо этого и полагаться на вызовы AJAX, чтобы сохранить состояние страницы, что подтверждает мои мысли о том, чтобы позволить пользователю подобрать, куда они ушли, даже если событие javascript никогда не запускается.