[解決済み】ページを更新せずにURLパラメータを削除する方法

質問

ドキュメントレディ時にブラウザのURLの"?"以降をすべて削除しようとしています。

私が試していることは以下の通りです。

jQuery(document).ready(function($) {

var url = window.location.href;
    url = url.split('?')[0];
});

これを実行し、以下のように動作することを確認できます。

jQuery(document).ready(function($) {

var url = window.location.href;
    alert(url.split('?')[0]);
});

解決方法は？

TL;DR

1- To 修正する 現在の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 などの場合に有効でしょう。

• ブラウザの バックボタン

• したい 作成 a 新しい のURLです。 追加 を/挿入/プッシュします。 新規URL から 履歴 のエントリを作成し、それを現在のURLにする。

• ユーザが ブックマーク 同じパラメータを持つページ(同じ内容を表示する)

• をプログラム的に実行します。 アクセス その データ を介して stateObj そして、アンカーからパースします。

---

コメントから理解したところ、あなたは再びリダイレクトすることなく、あなたのURLをきれいにしたいのです。

URL全体を変更することはできないことに注意してください。変更できるのは、ドメイン名の後に来るものだけです。つまり www.example.com/ の後を変更することができます。 .com/

www.example.com/old-page-name => can become =>  www.example.com/myNewPaage20180322.php

背景

使用することができます。

1- pushState() メソッド を追加したい場合は 新しい を変更したURLを履歴エントリに追加します。

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" で {} と "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;     
}

---

UPDATE

ワンライナーファンの方は、コンソール/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";

---

注2:

Firefox は window.history.pushState({}, document.title, ''); 最後の引数が空文字列の場合 スラッシュを追加する ( '/' ) は期待通りに動作し、URL 文字列のクエリ部分全体を削除しました。 Chromeは空文字列でも問題ないようです。