0

基本的な問題のように見えますが、これを解決することはできません。ページ間のナビゲーションをスムーズにするためにアニメーションを使用しています。イベントはアニメーションを起動するのwindow.onbeforeunloadに適しているように見えますが、jquery は新しいスレッドでアニメーションを実行します。アニメーションが終了するまで待つ方法はありますか? delay()およびjquery 関数を使用してみましsetTimeout()たが、明らかに関数は停止しませんでした。最後に待機するループを追加すると、ウィンドウが更新されないため、アニメーションも表示されません。

私のコード（jsfiddle）：

window.onbeforeunload = function (e) {
    $('#loader-sheet').fadeIn(500);
}
4

2 に答える 2

3

MDN から:

このイベントが void 以外の値を返すと、ユーザーはページのアンロードを確認するよう求められます。ほとんどのブラウザーでは、イベントの戻り値がこのダイアログに表示されます。

onBeforeUnloadアクション（ajax、アニメーションなど）を実行するためではなく、ユーザーにプロンプ​​トを表示するために使用されます

https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload

やりたいことを達成するための API はありません。ユーザーが離れようとしている場合、ブラウザでできることは、プロンプトを表示して、本当に離れたいかどうかを尋ねることだけです。ページから移動するのを防ぐことはできません (または、UI や JavaScript API を使用するものの制御を維持しながら遅延させることもできません)。

于 2013-11-01T13:46:31.073 に答える
1

ページが変更されるのを防ぐことはできません。確認としてテキストを提示することしかできません (例: 「保存されていない下書きがあります。本当に移動しますか?」)。

これは仕様によるものです。200 秒のアニメーションを入力して、迷惑な広告ポップアップがページを終了できないようにすることを想像してみてください。

ただし、ページが変更される正確な理由によっては、まだ何かを実行できる場合があります。たとえば、ユーザーがページ上のリンクをクリックしている (戻る/進むボタンを使用していない) 場合、次clickのように、これらの各リンクのハンドラーをオーバーライドできます。

$('a[href]').on('click', function () {
    if (/* link would change page */) {
        performPageTransition(this.getAttribute('href'));
        return false;
    }
});

function performPageTransition(newUrl) {
    $('#loaderSheet').fadeIn(500, function () {
        // Animation complete - move to new URL
        window.location = newUrl;
    });
}

そのため、リンクをすぐにたどる代わりに、クリック イベントをインターセプトし、後で手動でページを移動します。

ただし、AJAX 経由で新しいページ コンテンツをロードできるかどうかも検討します。

于 2013-11-01T14:00:16.217 に答える