web-dev-qa-db-ja.com

送信ボタンがクリックされない限り、ページアラートを残す

ユーザーが注文プロセスを完了する前に、もちろん支払いボタンに続いて以外の方法で注文プロセスを終了しようとした場合に、警告を実装しようとしています。

このようなもの：

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

それはいくつかの点で有害であると私は確信していますが、それは私が何をしようとしているのかを説明できる最良の方法です。また、一部のブラウザでは、私が書いた実際の警告の代わりにデフォルトのテキストが表示されることを理解しています。それで問題ありません。

いくつかの注意点として、この1つの単純なタスクのためにjQueryをロードするのではなく、単純な古いJSを使用したいと思います。このページには設定がないため、ページを離れるか、[今すぐ購入]をクリックするだけです。

[〜＃〜]更新[〜＃〜]：

私のためではなく、ユーザーのためであることを保証します。それは明確に説明されていますが（何をすべきか）、ユーザーはすぐに満足してプロセスが本当に終了する前に銃を飛び越えて去っていると思います。メッセージのような精神を無視してください。それは単純な2ステップのプロセスであり、彼らはプロジェクトの詳細を提出してから支払いを行います。何らかの理由で、彼らは詳細を提出し、その後、約50％の確率で支払いを完了していません。そして、彼らは「それで、あなたはプロジェクトに取り組んでいますか？」それから私は「あなたはあなたの注文を決して終えなかった」と説明しなければなりません。彼らは「おっと、ここに行く」とフォローアップします。

残念ながら、私はこれをマーケティングとWebデザイン101としてチョークで書きます。ルール＃1、人々は愚かです。失礼または悲観的な意味で解釈されるべきではありません。基本的に、このアイデアは、5歳の子供が簡単にできるように、設計、指導に誰もが馬鹿であると想定しています。私はユーザーを人質にしないことに完全に同意します。ただし、このページに到達するのは、彼らが開始する予定の注文プロセスの途中でのみです（このページは、ブラウジングのような方法で到達することはありません）。ですから、よくあるユーザーのミスを自分自身から救うのはかなり正当なユースケースだと思います。技術に精通していない顧客の人口統計であるため、正直にそのようなガイダンスが必要です。

javascriptonclicksubmitalert
19
user350530
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/

27
Derek 朕會功夫

それをしないでください。

使いやすさの点で微妙な違いがあります。一方で、注文しようと思っていたのに誤ってページを離れてしまったこともあります。一方で、それはすぐに迷惑になる可能性があります。前のセッションを保存するようにブラウザが設定されていて（つまり、次回の起動時にタブを再度開く）、1つのページがこのように動作する場合、onlyになります。次回（Mac Safariで確認済み）タブを再度開き、残りのタブを破棄しました。彼らはあなたから二度と買わないでしょう！

インラインメッセージを使用して、注文がまだ送信されておらず、ユーザーがアクションを確認する必要があることをユーザーに明確にすることをお勧めしますが、誤って移動した場合は、どこに簡単に移動できるようにする必要があります彼らはやめた。このような情報をCookieに保存して、後続のページにアクセスしたときにユーザーに "の注文が不完全であるというプロンプトが表示されるようにするのは、かなり簡単です。今すぐ終了しますか？ ？ "

別の方法として、非アクティブアラート（セッションが間もなく期限切れになるときにオンラインバンキングがプロンプトを表示することを考えてください）に依存して、ユーザーが気を取られた場合に「注文完了」ページに戻ることができます。

このイベントに依存したいことが確実な場合は、 この質問 への回答がより良い洞察を提供する可能性があります。基本的に、基本的なテキスト警告を超える機能またはその実装は、ブラウザー間で一貫性のない（？）実装があり、ユーザーによってブロックされる可能性があるため、信頼すべきではありません。

別の更新：

Gmailなどで使用されているこのアプローチに関するDerekのコメントに促されて、私は 記事 代わりにonunloadに固執し、AJAX呼び出しに依存することを提案しました。ページの状態を保存します。これは、javascriptイベントがトリガーされない場合でも、ユーザーが離れた場所をピックアップできるようにするという私の考えを裏付けるものです。

0
o.v.