必要だったので、jQueryとJavaScriptでユーザがページ離脱したときに、Ajaxを送信したりイベントを実行しようとしたのですが、あまりにもFirefox(FF)、Safari、Chrome、InternetExplorer(IE)での挙動が違ったので、備忘録的にメモ。
結論からいうと、最終的にはIEと、FF、Safari、Chromeの２種類のブラウザを判定してAjax送信方法を切り替えるという方法で実装しました。
まずはページを離脱したときに動作させるjquery
ユーザがページを離脱したときに確認分を出すコード。
[javascript]
$(window).on("beforeunload", function() {
return "本当に移動しても良いですか？";
});
[/javascript]
beforeunloadってのがページを離脱するときに動作するのですが、IEだとリンク内のJavascriptなどにも動作しちゃうなどの問題はあるようです。
主に、フォームなどでユーザが誤ってブラウザを消したりするのを防ぐためのもので、returnに「登録されていませんが、このページを離れても良いですか？」みたいな文言を入れて使うのが一般的な使い方っぽい。
その他、.onでなく.bindなどの方法があるみたい。JS（Javascript）でも方法があります。
jQueryでAjax送信（JSON/post）する
jQueryでAjax送信する方法もjQuery.get() とかいろいろあるのですが、以下サンプル。
[javascript]
var data = {
"sample" : "sample1",
};//jsonデータ作成
$.ajax({
type : ‘post’,
url : "JSON送信先URL",
data : data,
dataType : ‘json’,
scriptCharset: ‘utf-8’,
success : function(data) {
//成功時の処理を記載する
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
//エラー時の処理を記載する
}
});
[/javascript]
Ajaxで送信するにはいろんなオプションがありますが、getの場合はtypeを変えたり、受信するデータを変えるにはdataTypeを変えたりします。JSON形式の変数を作成して送信という形です。他にもオプションがありますが、まぁざっくりと。
詳しくはコチラ
jQuery.ajax(options) – jQuery 日本語リファレンス
ユーザがページを離れるときにjQueryでAjax送信する
ここからがやっかい。beforeunload自体が文言を出す以外にあまり対応しておらず、ブラウザごとの動作が違いすぎる。Firefox(FF)は基本的に適当に入れると動くのですが、それではChromeとSafariが動かない。IEさんは。。
ということで、まずはFirefoxとChrome、Safari用のコード。
[javascript]
$(window).on("beforeunload", function() {
pageout();
return "本当に移動しても良いですか？";
});
function pageout(){
var data = {
"sample" : "sample1",
};//jsonデータ作成
$.ajax({
type : ‘post’,
url : "JSON送信先URL",
data : data,
dataType : ‘json’,
scriptCharset: ‘utf-8’,
async: false,
success : function(data) {
//成功時の処理を記載する
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
//エラー時の処理を記載する
}
});
}
[/javascript]
beforeunloadイベントの中に、pageout()というメソッドが増えて、Ajax処理がpageout()の中に入っています。そして、async: falseってのがAjax内のオプションに増えています。
ページを離脱する前にpageout()って処理をやってね！ということで、beforeunloadイベント内に直接書いてもFirefox（FF）では動くのですが、動かないブラウザがあったり。。。
async: falseってのは、同期通信というものらしいですが、これがないとChrome、Safariは処理しないで移動しちゃいます。。
ただ、このasync: falseを追加するとIEでは動かないというか、エラーが返るようになります。
なのでIE用には、
[javascript]
$(window).on("beforeunload", function() {
pageout();
return "本当に移動しても良いですか？";
});
function pageout(){
var data = {
"sample" : "sample1",
};//jsonデータ作成
$.ajax({
type : ‘post’,
url : "JSON送信先URL",
data : data,
dataType : ‘json’,
scriptCharset: ‘utf-8’,
success : function(data) {
//成功時の処理を記載する
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
//エラー時の処理を記載する
}
});
}
[/javascript]
というasync: falseを抜いたもので実装する必要があります。ブラウザで判定してif文で分岐させる方法で実装しました。
jQueryとJavaScriptでページ離脱時にAjaxをJSON送信する所感
離脱時のbeforeunloadの中に入れたalertもブラウザによって動く、動かないという差異があり、return に入れた文言の表示方法もブラウザによって差異があり、ましてはユーザがページを離れたときに何かやってね！という動作はブラウザによって差異がありまくりで一苦労。。。
悪さもできてしまいそうなので、仕方ないのか。。。