web-dev-qa-db-ja.com

JavaScriptを使用して新しいページをロードせずにブラウザのURLを変更する

現在のページに何らかの影響を与える可能性がありますが、ブラウザのURLも変更するため、 JavaScript アクションをどのように実行すればよいでしょう。

戻るボタンで元のURLを再読み込みすればいいでしょう。

URLにJavaScriptの状態を記録しようとしています。

javascripturlfragment-identifierhashchange
293
Steven Noble

HTML 5では、 history.pushState関数 を使用してください。例として：

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

そしてhref：

<a href="#" id='click'>Click to change url to bar.html</a>

戻るボタンリストにエントリを追加せずにURLを変更したい場合は、代わりにhistory.replaceStateを使用してください。

113
clu3

history.pushStateとhistory.popStateをまだサポートしていないブラウザで動作させたい場合、 "古い"方法はフラグメント識別子を設定することです。これはページのリロードを引き起こさないでしょう。

基本的な考え方は、必要な状態情報を含む値にwindow.location.hashプロパティを設定してから、 window.onhashchangeイベント を使用するか、またはonhashchangeをサポートしていない古いブラウザ用に（IE <8 Firefox <3.6）では、ハッシュが変更されたかどうかを定期的にチェックし（たとえばsetIntervalを使用）、ページを更新します。また、初期コンテンツを設定するために、ページロード時にハッシュ値を確認する必要があります。

JQueryを使用している場合は、ブラウザでサポートされているメソッドを使用する hashchange plugin があります。他のライブラリ用のプラグインもあると思います。

注意が必要なことの1つは、ブラウザが一致するIDを持つ任意の要素にスクロールするため、ページ上のIDと衝突することです。

187
Matthew Crumley

window.location.hrefには現在のURLが含まれています。あなたはそれから読むことができます、あなたはそれに追加することができます、そしてあなたはそれを置き換えることができます、そしてそれはページのリロードを引き起こすかもしれません。

ページをリロードせずにブックマークできるようにURLのJavaScriptの状態を記録したい場合は、＃の後に現在のURLに追加し、onloadイベントによってトリガーされたJavaScriptの一部を現在の保存された状態が含まれているかどうかを確認するためのURL。

あなたが使うなら？ ＃の代わりに、ページのリロードを強制しますが、ロード時に保存された状態を解析するので、これは実際には問題にならないかもしれません。これにより、進むボタンと戻るボタンも正しく機能するようになります。

37
moonshadow

これが不可能であると私は強く疑うであろう。たとえば、銀行のログインページのように見えるページを作成し、アドレスバーのURLを実際の銀行のように表示させることができます。

おそらくあなたがなぜこれをしたいのかを説明するならば、人々は代わりのアプローチを提案することができるかもしれません...

[2011年に編集：私はこの答えを2008年に書いて以来、URLがそれである限り変更することを可能にする HTML5手法 に関してより多くの情報が明るみに出ました。同じ原産地からのものです]

22
Paul Dixon

ブラウザのセキュリティ設定により、表示されているURLを直接変更することはできません。あなたが引き起こすであろうフィッシングの脆弱性を想像することができます。

ページを変更せずにURLを変更する唯一の信頼できる方法は、内部リンクまたはハッシュを使用することです。例： http://site.com/page.html は http://site.com/page.html#item1 になります。このテクニックは、ハイジャック（AJAX +履歴保存）でよく使われます。

これを行うとき、私はしばしばハッシュをhrefとして持つアクションのためのリンクを使うでしょう、そしてjqueryでclickイベントを追加します。

それがあなたを正しい道へと導いてくれることを願っています。

8
Jethro Larson

jQueryには、ブラウザのURLを変更するための素晴らしいプラグインがあります。jQuery-pusher.

JavaScriptのpushStateとjQueryを一緒に使うことができます。

history.pushState(null, null, $(this).attr('href'));

例：

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});


状態を変更した後に作成されたXMLHttpRequestオブジェクトのHTTPヘッダーで使用される参照元を変更するJavaScripthistory.pushState()のみを使用します。

例：

window.history.pushState("object", "Your New Title", "/new-url");

pushState（）メソッド：

pushState()は3つのパラメータを取ります：状態オブジェクト、タイトル（現在無視されています）、そして（オプションで）URLです。これら3つのパラメータをそれぞれ詳しく調べてみましょう。

  1. 状態オブジェクト - 状態オブジェクトは、pushState()によって作成された新しい履歴エントリに関連付けられているJavaScriptオブジェクトです。ユーザーが新しい状態に移動するたびにpopstateイベントが発生し、イベントのstateプロパティに履歴エントリの状態オブジェクトのコピーが含まれます。

    状態オブジェクトは、直列化できるものなら何でも構いません。 Firefoxは状態オブジェクトをユーザーのディスクに保存して、ユーザーがブラウザを再起動した後に復元できるようにするため、状態オブジェクトの直列化表現にサイズ制限640k文字を課します。直列化表現がこれより大きい状態オブジェクトをpushState()に渡すと、メソッドは例外をスローします。これ以上のスペースが必要な場合は、sessionStorageまたはlocalStorage、あるいはその両方を使用することをお勧めします。

  2. title - Firefoxは現在このパラメータを無視しますが、将来使用する可能性があります。ここに空の文字列を渡すことは、将来のメソッド変更に対して安全であるはずです。あるいは、移動先の州の短いタイトルを渡すこともできます。

  3. URL - 新しい履歴エントリのURLはこのパラメータで与えられます。 pushState()を呼び出した後、ブラウザはこのURLを読み込もうとはしませんが、後でユーザがブラウザを再起動した後などに、後でURLを読み込もうとする可能性があります。新しいURLは絶対である必要はありません。相対的な場合は、現在のURLを基準にして解決されます。新しいURLは現在のURLと同じOriginのものでなければなりません。それ以外の場合、pushState()は例外をスローします。このパラメータはオプションです。指定されていない場合は、ドキュメントの現在のURLに設定されます。

7
Ilia Rostovtsev

これを処理できるYahoo YUIコンポーネント（ブラウザ履歴マネージャ）があります。 http://developer.yahoo.com/yui/history/

4
powtac

Facebookのフォトギャラリーでは、URLの＃ハッシュを使用してこれを実現しています。これがURLの例です。

「次へ」をクリックする前に

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

「次へ」をクリックした後：

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

すぐに新しいURLが続くハッシュバング（＃！）に注意してください。

3
Jonathon Hill

Jqueryプラグインがあります http://www.asual.com/jquery/address/

私はこれがあなたが必要としているものだと思います。

2
Hash

私のために働いているのは以下の通りです - history.replaceState()関数です - 

history.replaceState(data,"Title of page"[,'url-of-the-page']);

これはページをリロードしません、あなたはjavascriptのイベントでそれを利用することができます

2
Veshraj Joshi

私のコードは：

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

そして行動：

setLocation('http://example.com/your-url-here');

そして例

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

それで全部です ：）

1
Tusko Trush

私はそれがページの親パスが同じである限り可能であるかどうか疑問に思いました、それに新しいものだけがそれに追加されます。

ユーザーがそのページにいるとしましょう。http://domain.com/site/page.htmlそして、ブラウザはlocation.append = new.htmlを実行させることができ、ページはhttp://domain.com/site/page.htmlnew.htmlに変更されません。

あるいは、単にgetパラメータを変更できるようにするだけなので、location.get = me=1&page=1にしましょう。

元のページはhttp://domain.com/site/page.html?me=1&page=1になり、更新されません。

＃の問題は、ハッシュが変更されたときにデータがキャッシュされないことです（少なくとも私はそうは思いません）。そのため、新しいページがロードされるたびに、 - Ajax ページ以外の[戻る]ボタンと[進む]ボタンでデータをキャッシュして時間を費やすことはできませんデータを再ロードします。

私が見たことから、Yahooの歴史のことはすでに一度にすべてのデータをロードしています。 Ajaxのリクエストは何もしていないようです。そのため、divを使用してさまざまなメソッドを時間外に処理した場合、そのデータは各履歴状態に対して格納されません。

1
user58670

もっと簡単な答えを

window.history.pushState(null, null, "/abc")

これにより、ブラウザのURLのドメイン名の後に/abcが追加されます。このコードをコピーしてブラウザのコンソールに貼り付けると、URLが「 https://stackoverflow.com/abc 」に変更されます。

0
Samim

私は成功しました：

location.hash="myValue";

現在のURLに#myValueを追加するだけです。 Loadページでイベントをトリガーする必要がある場合は、同じlocation.hashを使用して関連する値を確認できます。 #によって返される値からlocation.hashを削除することを忘れないでください。

var articleId = window.location.hash.replace("#","");
0
Adam Hey