Web開発

jQueryとJavaScriptでページ離脱時にAjaxをJSON送信する

jquery

必要だったので、jQueryとJavaScriptでユーザがページ離脱したときに、Ajaxを送信したりイベントを実行しようとしたのですが、あまりにもFirefox(FF)、Safari、Chrome、InternetExplorer(IE)での挙動が違ったので、備忘録的にメモ。

結論からいうと、最終的にはIEと、FF、Safari、Chromeの2種類のブラウザを判定して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 に入れた文言の表示方法もブラウザによって差異があり、ましてはユーザがページを離れたときに何かやってね!という動作はブラウザによって差異がありまくりで一苦労。。。

悪さもできてしまいそうなので、仕方ないのか。。。

コメント

  1. 匿名 より:

    beforeだと、実際は去らなかった場合にも既にajax通信されてしまっているように思いますが、、、

コメントを残す