ページを更新せずにURLパラメータを削除する


153

「?」の後のすべてを削除しようとしています。ドキュメントのブラウザ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]);
});

1つのページに2つのフォームがあり、1つのフォームが送信されると、商品がカートに追加され、ページの更新後に長いパラメーターがURLに追加されます。したがって、ドキュメントの準備ができて、?
デレク、

1
ページを更新したい場合、なぜ待つの.ready()ですか?新しいURLにリダイレクトするために待つ必要はありませんし、.pushState()Joraidの推奨どおりに使用する必要もありません。
jfriend00 14年

回答:


227

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

要件に基づいて、自由に置き換えpushStatereplaceStateください。

パラメータ"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";


2
これはHTML5機能のみであることを忘れていました。developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/…–
Samuel Liew

なぜ最後のスラッシュを取り除くのですか?それはOPの質問とどのような関係がありますか?彼らはクエリ文字列を取り除きたいだけです。最初の疑問符は、クエリ文字列の始まりを定義します。
jfriend00 14年

6
replaceStateはより良いように見えますが、pushState同様に機能します。つまり、ブラウザーで[戻る]ボタンと[進む]ボタンをクリックし始め、History APIを操作するためのライブラリ全体がある理由に気づくまでです。
adeneo 14年

@ jfriend00は関数の動作に基づいており、3番目のパラメーターに追加したものは、URLのドメイン名の後に配置されます。つまり、www.example.com /のように、ドメイン/の後に配置されます。OPにドメイン名との間に複数の/がある可能性があります。したがって、ウェブサイトがサブディレクトリにある場合、問題はURLを変更する方法に関するものでしたが、正しく取得する方法についての質問だったので、調査してより良いURL改良を行うのは彼/彼女の責任です。
Mohammed Joraid 2014年

私はあなたがこれurl.substring(url.lastIndexOf('/') + 1);をまったく必要としないと言っているだけです。 url.split("?")[0]OPが要求したと思うすべての最初の疑問符の前の部分を取得します。OPの質問では、「ブラウザのURLの「?」以降のすべてを削除しようとしています」と質問されます。
jfriend00 14年

156

これらはすべて誤解を招くものであり、単一ページアプリの別のページに移動する場合を除き、ブラウザーの履歴に追加することはできません。ページを変更せずにパラメーターを削除したい場合は、以下を使用する必要があります。

window.history.replaceState(null, null, window.location.pathname);

3
KISS(Keepは愚かでシンプルです)。OPは、?そして、これは彼が求めたものに対して得ることができる最も簡単な答えです!
Warface

Firefoxでは機能しませんでした。更新しても、取得パラメーターは表示されます。プッシュと置換の両方を使用して動作します。window.history.replaceState({page:location.pathname}、document.title、window.location.pathname); window.history.pushState({page:location.pathname}、document.title、window.location.pathname);
Ajay Singh

1
history.replaceState(null、null、location.pathname + location.hash)-その部分を削除したくない場合は、location.hashを追加します
eselk

29

これを行う簡単な方法、どのページでも機能し、HTML 5が必要

// get the string following the ?
var query = window.location.search.substring(1)

// is there anything there ?
if(query.length) {
   // are the new history methods available ?
   if(window.history != undefined && window.history.pushState != undefined) {
        // if pushstate exists, add a new state to the history, this changes the url without reloading the page

        window.history.pushState({}, document.title, window.location.pathname);
   }
}

これは驚くほどうまくいきます。残念ながら、なぜ機能するのかについての最初の手掛かりはありません。すべてに感謝します。
Matt Cremeens、2017

1
最初の2行は、?の後に何かがあるかどうかを確認します。(部分文字列は '?'を削除するだけです)次に、ブラウザーが新しいpushstate呼び出しをサポートしているかどうかを確認し、最後にpushstateを使用してURLのスタックに状態を追加します(そのスタックでURLをプッシュおよびポップできます)、window.location .pathnameはローカルURLマイナスクエリとマイナスドメイン名と接頭辞(あるdomain.com/THIS?notthis
マルタインシェファー


23

私はこれのための最善かつ最も簡単な方法を信じています:

var newURL = location.href.split("?")[0];
window.history.pushState('object', document.title, newURL);

11

URLの末尾に次のような特別なタグがある場合:http : //domain.com/? tag=12345以下のコードは、URLに存在する場合は常にそのタグを削除するためのものです。

<script>
// Remove URL Tag Parameter from Address Bar
if (window.parent.location.href.match(/tag=/)){
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: document.title, Url: window.parent.location.pathname };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        window.parent.location = window.parent.location.pathname;
    }
}
</script>

これにより、URLから1つ以上(またはすべて)のパラメーターを削除することができます

ではwindow.location.pathnameあなたは基本的に前に「?」すべてを取得します URLで。

var pathname = window.location.pathname; //パスのみを返します

var url = window.location.href; //完全なURLを返します


これが質問に答えているかどうかはわかりませんが、質問自体は不明です:)
Martijn Scheffer

@MartijnSchefferそうです、私は元の質問への回答に対処するために回答を改善しました。
タリク

10

paramを1つだけ削除したいと思いましたsuccess。これを行う方法は次のとおりです。

let params = new URLSearchParams(location.search)
params.delete('success')
history.replaceState(null, '', '?' + params + location.hash)

これも保持されます#hash


URLSearchParamsIEでは動作しませんが、Edgeで動作します。ポリフィル使用するか、IEサポート用の単純なヘルパー関数を使用できます。

function take_param(key) {
    var params = new Map(location.search.slice(1).split('&')
        .map(function(p) { return p.split(/=(.*)/) }))   
    var value = params.get(key)
    params.delete(key)
    var search = Array.from(params.entries()).map(
        function(v){ return v[0]+'='+v[1] }).join('&')
    return {search: search ? '?' + search : '', value: value}
}

これは次のように使用できます。

history.replaceState(
    null, '', take_param('success').search + location.hash)

素晴らしい解決策、「?」を追加しない方法はありますか?パラメータが渡されない場合?
リックス

2
@RickSもちろん、take_paramはすでにそれを行っていますが、次のようにするURLSearchParamsことで同じことを行うことができますhistory.replaceState(null, '', (params ? '?' + params : '') + location.hash)。またはあなたが好きなの。
odinho-Velmont


6

これらの解決策はどれも実際にはうまくいきませんでした。IE11互換の関数で、複数のパラメーターを削除することもできます。

/**
* Removes URL parameters
* @param removeParams - param array
*/
function removeURLParameters(removeParams) {
  const deleteRegex = new RegExp(removeParams.join('=|') + '=')

  const params = location.search.slice(1).split('&')
  let search = []
  for (let i = 0; i < params.length; i++) if (deleteRegex.test(params[i]) === false) search.push(params[i])

  window.history.replaceState({}, document.title, location.pathname + (search.length ? '?' + search.join('&') : '') + location.hash)
}

removeURLParameters(['param1', 'param2'])

2
//Joraid code is working but i altered as below. it will work if your URL contain "?" mark or not
//replace URL in browser
if(window.location.href.indexOf("?") > -1) {
    var newUrl = refineUrl();
    window.history.pushState("object or string", "Title", "/"+newUrl );
}

function refineUrl()
{
    //get full url
    var url = window.location.href;
    //get url after/  
    var value = url = url.slice( 0, url.indexOf('?') );
    //get the part after before ?
    value  = value.replace('@System.Web.Configuration.WebConfigurationManager.AppSettings["BaseURL"]','');  
    return value;     
}

1

ページを更新せずにすべてのパラメーターをクリアするには、HTML5を使用している場合は、次のようにできます。

history.pushState({}, '', 'index.html' ); //replace 'index.html' with whatever your page name is

これにより、ブラウザの履歴にエントリが追加されます。またreplaceState、新しいエントリを追加するのではなく、古いエントリを置き換えるだけの場合も検討できます。


0

jqueryでは<を使用します

window.location.href =  window.location.href.split("?")[0]

6
jQueryについては何もありません
j08691 2017

0

以下は、ロケーションハッシュを保持し、ブラウザの履歴を汚染しないES6ワンライナーですreplaceState

(l=>{window.history.replaceState({},'',l.pathname+l.hash)})(location)

これについてもう少し情報を追加してもらえますか?これが何をしているか理解するのは難しいです。
リックス

2
@RickSこれはIIFE(すぐに呼び出される関数式)であるため、括弧()(場所)で囲まれているため、最初の括弧は無名関数としてそれ自体にとどまることができます。最後の(場所)は、それを渡す関数をすぐに呼び出します他のすべての回答と同様に、残りは基本的なreplaceState であるので、関数はグローバルlocation別名window.locationオブジェクトにグローバルにアクセスでき、パス名とハッシュ(example.com/#hash)を新しいURLとして連結しています。それが消化locationl
でき

@なぜ使用しないのwindow.history.replaceState({}, '', location.pathname + location.hash)ですか?;)
Fabian von Ellerts、

@FabianvonEllerts良い質問ですが、実際にlocation2回書き込む必要がないかどうかはわかりませんが、変数に割り当てる必要はありません
缶ラウ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.