TL; DR
1- 現在のURL を変更し、それ(新しい変更されたURL)を新しいURLエントリとして履歴リストに追加/挿入するには、次を使用しますpushState
。
window.history.pushState({}, document.title, "/" + "my-new-url.html");
2- 現在のURL を履歴エントリに追加せずに置き換えるには、次のコマンドを使用します。replaceState
window.history.replaceState({}, document.title, "/" + "my-new-url.html");
3 - によってあなたにビジネスロジック、pushState
のような場合に有用であろう。
ブラウザの戻るボタンをサポートしたい
あなたがしたいの作成新しい、URLを追加 /挿入/プッシュする新しいURLへの履歴エントリを、そしてそれを現在のURL作ります
ユーザーが同じパラメーターでページをブックマークできるようにする(同じコンテンツを表示するため)
プログラム的にアクセスし、データを通過stateObj
後、アンカーからパース
私はあなたのコメントから理解したように、再びリダイレクトすることなくあなたのURLをきれいにしたいです。
URL全体を変更することはできません。ドメイン名の後に続くものを変更するだけです。つまり、変更することはできませんがwww.example.com/
、その後の変更は可能です。.com/
www.example.com/old-page-name => can become => www.example.com/myNewPaage20180322.php
バックグラウンド
以下を使用できます。
1- 変更された新しい URLを履歴エントリに追加する場合は、pushState()メソッド。
2- 現在の履歴エントリを更新/置換する場合は、replaceState()メソッド。
.replaceState()
新しい履歴を作成するのではなく、現在の履歴エントリ.pushState()
を.replaceState()
変更することを除いて、まったく同じように動作します。これにより、グローバルブラウザーの履歴に新しいエントリが作成されなくなることはありません。
.replaceState()
ユーザーのアクションに応じて、現在の履歴エントリの状態オブジェクトまたはURLを更新する場合に特に便利です。
コード
そのために、この例では次の形式と同様に機能するpushState()メソッドを使用します。
var myNewURL = "my-new-URL.php";//the new URL
window.history.pushState("object or string", "Title", "/" + myNewURL );
要件に基づいて、自由に置き換えpushState
てreplaceState
ください。
パラメータ"object or string"
を{}
and "Title"
で置き換えるとdocument.title
、最終的なステートメントは次のようになります。
window.history.pushState({}, document.title, "/" + myNewURL );
結果
前の2行のコードは、次のようなURLになります。
https://domain.tld/some/randome/url/which/will/be/deleted/
になるために:
https://domain.tld/my-new-url.php
アクション
では、別のアプローチを試してみましょう。ファイル名を保持する必要があるとします。ファイル名は、最後/
のクエリ文字列の前に来ます?
。
http://www.someDomain.com/really/long/address/keepThisLastOne.php?name=john
になります:
http://www.someDomain.com/keepThisLastOne.php
このようなものはそれを機能させるでしょう:
//fetch new URL
//refineURL() gives you the freedom to alter the URL string based on your needs.
var myNewURL = refineURL();
//here you pass the new URL extension you want to appear after the domains '/'. Note that the previous identifiers or "query string" will be replaced.
window.history.pushState("object or string", "Title", "/" + myNewURL );
//Helper function to extract the URL between the last '/' and before '?'
//If URL is www.example.com/one/two/file.php?user=55 this function will return 'file.php'
//pseudo code: edit to match your URL settings
function refineURL()
{
//get full URL
var currURL= window.location.href; //get current address
//Get the URL between what's after '/' and befor '?'
//1- get URL after'/'
var afterDomain= currURL.substring(currURL.lastIndexOf('/') + 1);
//2- get the part before '?'
var beforeQueryString= afterDomain.split("?")[0];
return beforeQueryString;
}
更新:
ワンライナーファンの場合は、コンソール/ firebugで試してみてください。このページのURLは次のように変わります。
window.history.pushState("object or string", "Title", "/"+window.location.href.substring(window.location.href.lastIndexOf('/') + 1).split("?")[0]);
このページのURLは次のものから変更されます:
http://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page/22753103#22753103
に
http://stackoverflow.com/22753103#22753103
注:としてサミュエル・リューは、以下のコメントで示され、この機能はのみのために導入されましたHTML5
。
別のアプローチは、実際にページをリダイレクトすることです(ただし、クエリ文字列 `? 'は失われますが、それでもまだ必要ですか、それともデータが処理されていますか?)。
window.location.href = window.location.href.split("?")[0]; //"http://www.newurl.com";