レンタル機器の見積もりと予約をユーザーに提供するサイトに取り組んでいます。ユーザーがプロセスに数ステップ以上入り、終了する前にブラウザーを閉じるか別の場所に移動することを選択した場合、クライアントは特別な取引を提供したいと考えています。クライアントは、ウィンドウが閉じないようにして、電話番号を尋ねて、空いた場合により良い料金で電話をかけられるようにしたいと考えています。
ウィンドウが閉じるのを防ぎ、ブラウザーが移動するのを防ぐことができます。これが発生すると、div が表示され、ユーザーが送信するための小さな項目と、先に進んでウィンドウを閉じるためのオプションが表示されます。これはすべてうまくいきます。問題は、ユーザーがページを更新したり、戻るボタンや進むボタンを押したりすると、ユーザーがブラウザーを閉じたかのようにアクションがブロックされることです。しかし、彼らがまだ予約プロセスにあることを意味するので、彼らがページを進めたり、戻したり、更新したりしても、私は気にしません。残念ながら、この 2 種類のイベントを区別することはできません。
ユーザーへのメッセージをトリガーする関数を onbeforeunload イベントにアタッチしています。私が取り組んでいるサイトは ASP.NET サイトです。
これが私が使用しているコードです。要素 divSecondClose と divThankYou は両方とも、ページが最初に読み込まれるときに display:none に設定されます。<%=DisplayThankYou%> は、フォームが送信された後に「true」に設定され、お礼のメッセージが表示されます。
var showSecondCloseOnExit = true;
var displayThankyou = '<%=DisplayThankYou %>';
if (displayThankyou == true)
{
var divSecondClose = document.getElementById('divSecondClose');
divSecondClose.style.display = '';
var divThankYou = document.getElementById('divThankYou');
divThankYou.style.display = '';
showSecondCloseOnExit = false;
}
else
{
addListener(window, 'beforeunload', CloseWindowEvent, false);
var allLinks = document.getElementsByTagName('a');
for (var linkIndex = 0; linkIndex < allLinks.length; linkIndex++)
{
addListener(allLinks[linkIndex], 'click', function(){showSecondCloseOnExit = false;}, false);
}
}
function CloseWindowEvent(e) {
if(!e) e = window.event;
if (showSecondCloseOnExit)
{
var divSecondClose = document.getElementById('divSecondClose');
divSecondClose.style.display = '';
showSecondCloseOnExit = false;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'RATE CHANGE NOTIFICATION\nWould you take a moment before you leave to help us serve you better?';
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
}