windowオブジェクトのbeforeunload について

カスタマイズビューで, レコード保存しないままページ遷移されるのを防ぐために,windowオブジェクトの beforeunload イベント,あるいは unload イベントに自動保存機能を埋め込んで使いたいのですが,たとえば以下のようなソースでもIEだと機能するのに,Chromeでは動作しません。

何か回避策をご存知の方がいらっしゃいましたらご教示ください。

※ Chromeバージョン 53.0.2785.116 m

 

window.addEventListener(‘beforeunload’, function(e){
      alert(event);
      e.returnvalue = ‘hogehoge’;
},false);

 

milkyway0307さん
cstapの瀧ヶ平です。

e.returnValueがe.retrunvalueとなっているのが原因ではないでしょうか?
また、beforeunloadイベント内ではalertはブラウザにブロックされるので注意が必要です。

主要ブラウザだとIE以外では、

beforeunloadイベントで「変更が破棄されますがよろしいですか?」的な標準文面を変更することができなくなったようです。

IEだと機能するのに、Chromeでは動作しないとおっしゃっている点から、ここでつまずいているのではないかと推測されます。

 

ただしbeforeunloadイベント自体はChromeでも有効なので、自動保存自体はできると思います。

瀧ヶ平様

 

ありがとうございます。

仰る通りでした。初歩的なミスでお恥ずかしいです。

そのうえで、もう一つ伺ってもよろしいでしょうか。

window.addEventListener(‘beforeunload’, function(e){
e.returnValue = ‘hogehoge’;
console.log(event);
},false);

としても、画面に表示されるのは以下のメッセージです。

独自のメッセージを出し、下のメッセージそのものを消せないものでしょうか。

武井様

 

お返事ありがとうございます。

文面を変更できなくなっているんですね。承知しました。

そういうものだとして、なんとか対応します。

この案件で, unload イベントが動かないと思っていた理由がもう1つあったことに気づきました。

今,表示している「カスタマイズビュー」をしている一覧表から,ほかの一覧表に切り替えたときに unload イベントが働いていないように思うのですが,私の勘違いでしょうか。

リロードしたり,ほかの関係ないページに移動するときは unload が働くのですが...

milkyway0307さん

 

今私が試したところだと、

左上の一覧から切り替える分にはunloadイベントは発火していましたよ。

武井様

お返事ありがとうございます。
とすると、私の設定がおかしいのですね。
今、出先なので、戻ったらもう少し試行錯誤してご報告します。

武井様

たびたびありがとうございました。

おかげさまで解決しました。

unload が発火していなかったのではなく、unload イベントの中で私が当然うまくいくと思っていたコードがはじかれていたことが問題だったようです。 思い込みは禁物ですね・・・。勉強になります。

 

unload イベントの中で

 kintone.api( <records.json のURL>, ‘PUT’, >パラメータ>)

.then( function(){ console.log(‘保存しました’))

といったような処理をしていたのですが、unloadイベント内でPUTで保存をしても、APIがエラーを出すのに戻り値が空になるという現象が起きていました。

 

どうやら、次の書き込みの方と似たような現象が起きていたみたいです。昨日に作業をしていた環境と、今日使っている環境が違うので一概には言えませんが、タイミングのずれでこういうエラーが起きうるもの、という理解でいいのでしょうか。

https://cybozudev.zendesk.com/hc/ja/community/posts/202921294-kintone-api%E3%81%A7REST-API%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%9F%E7%B5%90%E6%9E%9C%E3%81%8C%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%A8%E3%81%AA%E3%82%8B%E5%8E%9F%E5%9B%A0%E8%AA%BF%E6%9F%BB

 

milkyway0307さん

 

この問題はたまに起きますね。

しかも起きたり起こらなかったりなので困ります。

この辺りはkintoneの内部のことなので、私にも詳しいことは分かりません。

window.addEventListener('beforeunload', function (e) {
var d = new $.Deferred;
kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body).then(function () {
console.log("保存しました");
d.resolve();
});
return d.promise();
}, false);

 

jQueryにてこのようにDeferredすることでタイミングを合わせることができるのではないでしょうか。

武井様

何度もありがとうございます。

取り急ぎ保存処理の後に何かするわけではなく,APIがエラーを出しているのは気持ち悪いですがPUTでの更新はされているので,当面はAPIコールのエラーチェックをしない形にしてみました。

jQuery はまだ勉強したことがないのですが,ご提示いただいたコードも追い追い実装しながら試してみます。

 

武井様

 

何度もありがとうございます。

いただいたDeferredのコードをあてはめてみましたが,どうも結果が変わりませんでした。

取り急ぎ,APIがエラーを出してもPUT更新が失敗していることはなさそうなので,判定にこだわらないままにします。

いろいろとありがとうございました。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。