web-dev-qa-db-ja.com

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

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

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

www.mysite.com/products

のようなものに

www.mysite.com/products/{selectedCat}

ページを更新せずに。
これを達成するために使用できるJavaScript APIの種類はありますか？

urladdress-bar
91
hashem

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);
};

詳細はこちら： http://www.w3.org/TR/html5-author/history.html

フォールバックソリューション： https://github.com/browserstate/history.js

153
Alfred

連中が既に言ったことに追加するには、onclick関数で必要なURLに一致するようにwindow.location.hashプロパティを編集します。

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

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

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

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

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

7
Justin Wignall

アドレスバーの直感的な誤用であり、フィッシング攻撃を助長する可能性があるため、これは可能だとは思いません（少なくともまったく異なるアドレスに変更する）。

3
Galwegian