ページ再読み込みイベントをキャプチャするにはどうすればよいですか?
ユーザーがページを更新すると、すべての入力が失われるメッセージングシステムがあります。 ajaxを使用して再入力したいので、ページが更新/再ロードされたときを検出する必要があります。
$('body').bind('beforeunload',function(){
//do something
});
しかし、これは後で情報を保存することはありません。ただし、Cookieをどこかに(またはローカルストレージに)保存することを計画しており、unload
イベントが常にすべてのブラウザーで発生するわけではありません。
例: http://jsfiddle.net/maniator/qpK7Y/
コード:
$(window).bind('beforeunload',function(){
//save info somewhere
return 'are you sure you want to leave?';
});
ページを更新する前に変数をブックキープする場合
$(window).on('beforeunload', function(){
// your logic here
});
何らかの条件でコンテンツベースをロードする場合
$(window).on('load', function(){
// your logic here`enter code here`
});
すべてのコードはクライアント側です。これが役に立つことを願っています:
最初に使用する3つの関数があります。
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
function DeleteCookie(name) {
document.cookie = name + '=; expires=Thu, 01-Jan-70 00:00:01 GMT;';
}
次に、ページのロードから始めます。
$(window).load(function () {
//if IsRefresh cookie exists
var IsRefresh = getCookie("IsRefresh");
if (IsRefresh != null && IsRefresh != "") {
//cookie exists then you refreshed this page(F5, reload button or right click and reload)
//SOME CODE
DeleteCookie("IsRefresh");
}
else {
//cookie doesnt exists then you landed on this page
//SOME CODE
setCookie("IsRefresh", "true", 1);
}
})