url - ページを更新せずにブラウザのアドレスバーを変更する方法はありますか?

Question

私はウェブアプリを開発しています。その中に、ユーザーがカテゴリの 1 つをクリックするたびに、更新パネルが適切なコンテンツをロードするカテゴリと呼ばれるセクションがあります。

ユーザーがカテゴリをクリックした後、ブラウザのアドレスバーの URL を変更したい

www.mysite.com/products

のようなものに

www.mysite.com/products/{selectedCat}

ページを更新せずに。
これを実現するために使用できる JavaScript API はありますか?

score 158 · Accepted Answer

HTML5を使用すると、リロードせずにURLを変更できます。

ブラウザの履歴に新しい投稿を作成したい場合（つまり、戻るボタンが機能します）

window.history.pushState('Object', 'Title', '/new-url');

戻ることができずにURLを変更したいだけの場合

window.history.replaceState('Object', 'Title', '/another-new-url');

オブジェクトはajaxナビゲーションに使用できます。

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

score 31 · Accepted Answer

みんながすでに言ったことに追加するには、window.location.hash プロパティを編集して、onclick 関数で必要な URL に一致させます。

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name

score 7 · Accepted Answer

アドレスバーを完全に別の URL に移動せずにその URL に直接操作することは、セキュリティ上の理由から許可されていないと思います。

www.mysite.com/products/#{selectedCat}

つまり、同じページ内のアンカースタイルリンクで、現在ほとんどの JavaScript ライブラリに存在するさまざまな履歴/「戻るボタン」スクリプトを調べます。

更新パネルについて言及すると、asp.net を使用していると推測されます。その場合、asp.net ajax ヒストリーコントロールは開始するのに適した場所です。

score 3 · Accepted Answer

アドレスバーの直感的ではない誤用であり、フィッシング攻撃を促進する可能性があるため、これは可能ではないと思います (少なくともまったく別のアドレスに変更すること)。

score -1 · Accepted Answer

「window.location.hash」

sanchothefatによって示唆されているように、それを行う唯一の方法でなければなりません。私がこの機能を見たすべての場所のため、それは常にURLの＃の後にあります。

score -1 · Accepted Answer

これはあなたが言っているようにはできません。somej.net によって提案された方法は、取得できる最も近い方法です。これは、実際には AJAX 時代では非常に一般的な方法です。Gmail もこれを使用しています。

url - ページを更新せずにブラウザのアドレス バーを変更する方法はありますか?