web-dev-qa-db-ja.com

[戻る]ボタンがpopStateをトリガーするときに、ページの更新を防ぐにはどうすればよいですか？

リロードせずにページのコンテンツを変更しようとしています。現在、私のコードは次のとおりです。

window.onpopstate = function(event){
    // Ajax Request the Page and replace content with new content
};

これは、状態をプッシュしてpopstateイベントをトリガーしたときに機能しますが、ブラウザーの戻るボタンを押すと、onpopstateイベントを呼び出す代わりにURLに移動します。代わりに私のajax呼び出しでページの更新を防ぎ、ページを更新するにはどうすればよいですか？

編集：私はpushStateとpopstateで更新しようとしています。私は自分のURLをハッシュフリーに保つことを望んでいました。

javascriptjqueryhtmlhistory
25
GhotiPhud

現在のページからプッシュした履歴状態が常に履歴にあることを確認して、戻るボタンでページの読み込みが実行されないようにする必要があります。

ユーザーがWebアプリに「含まれる」ようにして、戻るボタンが常にある種の機能を提供するようにしている場合は、少なくとも2つの状態をスタックにプッシュしてから、popstateハンドラーから別の状態をプッシュする必要があります。 。

var foo = {foo: true}; // state object
history.pushState(foo, "unused argument", "#newInitialUri");
...
var bar = {bar: true}
history.pushState(bar, "unused argument", "#newStateOfWebApp");
...
window.onpopstate = function(event){
    ...
    var baz = {baz: true}
    history.pushState(baz, "unused argument", "#baseState");
};

上記の例では、「/」をロードしたとしています。スクリプトの実行が開始され、ブラウザウィンドウのURIが「/＃newInitialUri」に変更されますが、ページの読み込みは行われません。その後すぐに、ブラウザのURIが「/＃newStateOfWebApp」に変わり、ページの読み込みは行われません。

ユーザーがブラウザの戻るボタンを押します。 popstateハンドラーが起動します。ハンドラーの間、event.stateはfooに等しく、ブラウザーのuriは '/＃newInitialUri'です。ページの読み込みは行われません。ハンドラーは完了して、history.pushStateを呼び出し、ブラウザーのURIは '/＃baseState'になります。ページの読み込みは行われません。ユーザーがもう一度クリックすると、popstateイベントが再び発生し、event.stateがfoo（再び）に等しくなり、ブラウザのURIは「/＃newInitialUri」（ページの読み込みなし）になり、その後再び「/＃baseState」になります（ページの読み込みなし）。

覚えておくべき重要なことは、popstateハンドラーのevent.stateには常に、戻ってきたURItoではなく、あなたが今来たものから。これは最初は混乱しましたが、考えてみると理にかなっています。たとえば、ユーザーがGoogleにアクセスした後で、ページに戻った可能性があります。状態オブジェクトは、アプリのステータスをコードに伝える機会です。

一部のブラウザーは、ページの読み込み時にpopstateイベントを起動することに注意してください（これは、私の理解によると、仕様に従って発生するはずです）。コードを実行する前にハンドラーで状態オブジェクトを確認し、ページの読み込み時に意図しないコードを実行しないようにしてください。

最後に、jQueryを使用してイベントを処理している場合は、event.originalEvent.stateを使用して状態オブジェクトを参照する必要があります。

29
peabody

これ が役立つかもしれません

nload イベントは、ユーザーがページから移動するとウィンドウ要素に送信されます。これは、多くのことの1つを意味する可能性があります。ユーザーはリンクをクリックしてページを離れるか、アドレスバーに新しいURLを入力した可能性があります。進むボタンと戻るボタンは、イベントをトリガーします。ブラウザーウィンドウを閉じると、イベントがトリガーされます。ページのリロードでも、最初にアンロードイベントが作成されます。

参照

http://api.jquery.com/unload/

テストされていない

    $(window).unload(function(e){    
        e.preventDefault();
        $(window).trigger('popstate ');      

    });    

    $(window).bind('popstate ',function(){

   //your ajax call here 
    });

そして最後に[〜＃〜] demo [〜＃〜]がブラウザの戻るボタンをクリックして動作することを確認します

更新

あなたは正しいアンロードをキャンセルできますが、あなたは次のようなことができます

$(window).unload(function(e){
    e.preventDefault();
    $(window).trigger('beforeunload');   

});


$(window).bind('beforeunload',function(){

alert('call your ajax here');
    return '';
});

まだ別のデモ

1
Rafay