web-dev-qa-db-ja.com

window.history.pushStateを「安全に」使用するにはどうすればよいですか

対応ブラウザでwindow.history.pushState()関数を使用したいと思います。残念ながら、Firefoxでエラーが発生します。

TypeError：history.pushStateは関数ではありません

どうすればそれを回避できますか？

javascripthtmltry-catch
20
Roch

[try-catch]タグは、答えをすでに知っていることを意味します...（もっと具体的なことはありますか？）他の可能性は、if ( history.pushState ) history.pushState( {}, document.title, location.href );をチェックすることです

19
Free Consulting

JavaScriptではテストしていませんが、他の言語では、以下の場合、try-catchは単純なものよりもリソースを大量に消費することを知っています...

使用する：

if(history.pushState) {
    history.pushState({"id":100}, document.title, location.href);
}

戻るボタンをクリックしても、window.onpopstateを実装しない限り、実際には何も起こりません。コンテンツを取得するために必要なデータを渡す必要があります。

if(history.pushState && history.replaceState) {
    //Push current id, title and url
    history.pushState({"id":100}, document.title, location.href);

    //Push new information
    history.pushState({"id":101}, "new title", "/new-url/");

    //this executes when you use the back button
    window.onpopstate = function(e) {
        alert(e.state.id);
        //perhaps use an ajax call to update content based on the e.state.id
    };
}
24
Levi Morrison

History APIにはシムが存在します。 History.js は、HTML4のhashchangeイベントとドキュメントフラグメント識別子を使用して、古いブラウザーの履歴APIを模倣します。最新のブラウザーでハッシュURLの1つが使用されている場合、replaceStateを使用して静かにURLを修正します。

古いブラウザで機能しないことに問題がなく、エラーをスローせずに使用したい場合は、これを行います...

window.history && window.history.pushState && window.history.pushState("", "", url);

これにより、履歴とpushstate関数が使用される前に存在することが確認されます。

0
herostwist