beforeunload イベントで文字列を返すと、そのページから移動（ページを更新、ブラウザを閉じる）しようとする前に、確認ダイアログが出せる。
- サンプルコード（jQuery）
$(window).bind('beforeunload', function(e) {
return "<任意の文字列>";
});
確認ダイアログの内容はブラウザ依存。
- IE
このページからほかのページに移動しますか？
<任意の文字列>
続行するには [OK] をクリックし、現在のページから移動しない場合は [キャンセル] をクリックしてください。
[OK] [キャンセル]
- Firefox
このページから移動します。よろしいですか？
<任意の文字列>
"OK"を押すと移動、"キャンセル"を押すと現在のページにとどまります。
[キャンセル] [OK]
- Safari
このページから移動してもよろしいですか？
<任意の文字列>
このページから離れる場合は"OK"をクリックし、このページに残る場合は"キャンセル"をクリックしてください。
[キャンセル] [OK]
- Chrome
<任意の文字列>
[このページにとどまる] [このページを離れる]
- Opera
beforeunload 未対応
IE だと href に javascript が書かれたリンクをクリックしても beforeunload が発生するので、その対策が必要。以下のサンプルでは、フラグを用意してクリック時にフラグを設定するようにした。
サンプルページ http://labs.irons.jp/tmp/beforeunload.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>beforeunload</title>
</head>
<body>
<a href="http://labs.irons.jp/">hoge</a><br>
<a href="javascript:void(0)">fuga</a>
<form>
<input type="submit"></input>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var execBeforeUnload = true; // 確認ダイアログを出すかどうかのフラグ
function cancelBeforeUnload() {
execBeforeUnload = false;
setTimeout(function() {
execBeforeUnload = true;
}, 1000);
}
// IE だと href="javascript:void(0)" といったリンクを
// クリックしても beforeunload が発生するのでキャンセルする
$("a").bind('click', function(e) {
if (this.href.indexOf('javascript') == 0) {
cancelBeforeUnload();
}
});
// form の submit 時に beforeunload が発生するのでキャンセルする
$('form').bind('submit', function(e) {
cancelBeforeUnload();
});
$(window).bind('beforeunload', function(e) {
if (execBeforeUnload) {
return "<任意の文字列>";
}
});
});
</script>
</body>
</html>
| 
コメント（0）
芸能人・有名人の新着記事
