わずかな異常 - クリック

Question

にURL「状態」を変更するだから私はonClickのその関数を呼び出すpushStateの呼び出しと、いくつかのjQueryを処理する関数で次のスクリプトを書いた：

function pushUrlState(id, url) { 
    if (typeof (history.pushState) != "undefined") { 
     var obj = { Id: id, Url: url }; 
     history.pushState(obj, obj.Id, obj.Url); 
    } else { 
     alert("This browser does not support HTML5."); 
    } 
} 
$(function() { 
    $("#id1").click(function() { 
     pushUrlState('Id1', '2017/15/05/my-birthday-is-today'); 
    }); 
    $("#id2").click(function() { 
     pushUrlState('Id2', '2017/14/05/my-birthday-is-tomorrow'); 
    }); 
    $("#id3").click(function() { 
     pushUrlState('Id3', '2017/16/05/my-birthday-was-yesterday'); 
    }); 
}); 

は非常にうまく動作しますが、しかし、私は次のように終わるの様々な要素の多くクリックした後：

http://127.0.0.1:3000/2017/15/05/2017/14/05/2017/16/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/my-birthday-is-tomorrow

私はそれが戻ってドメインにURLを殺す呼び出すことができますいくつかの機能がありますか？

Answer 1

相対URLを渡します（あなたのURLは/で始まらない）。

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

URL - 新しい履歴エントリのURLは、このパラメータで指定されています。 pushState（）を呼び出した後、ブラウザはこのURLをロードしようとしませんが、後でブラウザを再起動した後にURLをロードしようとします。たとえば、 です。 新しいURLは である必要はありません。それが相対的であれば、現在のURLと比較して解決されます。 新しいURLは、現在のURLと同じ起源である必要があります。それ以外の場合は、 pushState（）が例外をスローします。このパラメータはオプションです。 が指定されていない場合は、ドキュメントの現在のURLに設定されます。

コンソールで次の2つのコードスニペットを試してみて、違いを参照してください。これはあなたのコードのように振る舞う

（相対URL）が

[1,2,3,4,5,6,7,8,9] 
.forEach(
    num => 
    //relative url (does not start with/
    history.pushState({}, `page ${num}`, `hello${num}/world${num}.html`) 
) 

これは、あなたが動作するようにそれをたいように振る舞います：

[1,2,3,4,5,6,7,8,9] 
.forEach(
    num => 
    //absolute url start with/
    history.pushState({}, `page ${num}`, `/hello${num}/world${num}.html`) 
)