web-dev-qa-db-ja.com

jquery：リダイレクトせずにURLアドレスを変更しますか？

可能性のある複製：
AJAXアプリのアドレスバーURLを変更して現在の状態に一致させる

ページをリダイレクトせずにURLアドレスを変更するにはどうすればよいですか？

たとえば、以下のリンクをクリックすると：

<a href="http://mysite.com/projects/article-1" class="get-article">link</a>

リンクからURLを取得します。

var path = object.attr('href');

以下でこれを行うと、ページがリダイレクトされます。

window.location = path;

私はこのようなことをしたい site 、画像をクリックすると、ajax呼び出しは要求されたページを取得し、ウィンドウ上のURLアドレスも変更されるので、クリックしたものへのパスがあります。

jqueryajaxredirectlocation
84
laukok

注：history.pushState()がサポートされるようになりました-他の回答をご覧ください。

cannotリダイレクトせずにURL全体を変更します。代わりにhashを変更します。

hashは、＃記号の後に続くURLの一部です。それは当初、HTMLドキュメントのセクションに（ローカルに）誘導することを目的としていましたが、JavaScriptを使用してそれを読み取って変更し、使用することもできますややグローバル変数のようです。

適切に適用された場合、この手法は次の2つの方法で役立ちます。

  1. ブラウザの履歴には、実行した各ステップが記憶されます（url + hashが変更されたため）
  2. 特定のhtmlドキュメントにリンクするだけでなく、javascriptに何をすべきかの手がかりを与えるアドレスを設定できます。つまり、Webアプリ内の状態を指すことになります。

できるハッシュを変更するには：

document.location.hash = "show_picture";

ハッシュの変更を監視するには、次のようにする必要があります：

window.onhashchange = function(){
    var what_to_do = document.location.hash;    
    if (what_to_do=="#show_picture")
        show_picture();
}

もちろん、ハッシュは単なる文字列であるため、好きなことをほとんど実行できます。たとえば、JSONを使用してstringifyにオブジェクト全体を配置できます。

それで高度なことを行うには、非常に優れたJQueryライブラリがあります。

80
david

こちらをご覧ください- http://my.opera.com/community/forums/topic.dml?id=1319992&t=1331393279&page=1#comment11751402

基本的に：

history.pushState('data', '', 'http://your-domain/path');

履歴オブジェクトを操作して、これを機能させることができます。

同じドメインでのみ機能しますが、ハッシュタグアプローチの使用に満足しているので、それは問題ではありません。

当然、クロスブラウザでテストする必要がありますが、それはOperaフォーラムに投稿されたので、Operaで動作すると想定しても安全です。Chromeでテストしましたそしてそれはうまくいきました。

68
Brendan

そのサイトは、URLの「フラグメント」部分、つまり「＃」の後の部分を利用しています。これは、GET要求の一部としてブラウザによってサーバーに送信されませんが、ページの状態を保存するために使用できます。そのため、ページの更新や再読み込みを行わずにフラグメントを変更できます。ページがロードされると、javascriptはこのフラグメントを読み取り、ページコンテンツを適切に更新し、必要に応じてajaxリクエストを介してサーバーからデータを取得します。 jsでフラグメントを読み取るには：

var fragment = location.hash;

ただし、この値には先頭に「＃」文字が含まれることに注意してください。フラグメントを設定するには：

location.hash = "your_state_data";
8
Richard H

求めていることはできません（リンク先のサイトでもそれができません）。

ただし、canは、fragmentと呼ばれる#記号の後のURLの部分を変更します。このような：

window.location.hash = 'something';

フラグメントはnotサーバーに送信されます（たとえば、Google自体がhttp://www.google.com/とhttp://www.google.com/#somethingの違いを認識できませんが）ページ。次に、このJavascriptは、フラグメントの値に基づいて異なるAJAXリクエストを実行することを決定できます。これは、リンク先のサイトがおそらく行う方法です。

2
Jon

これは、URLの難読化ではなく、URLの書き換えによって実現されますが、これは実行できません。

これを行う別の方法は、前述したように、ハッシュタグを変更することです。

window.location.hash = "/2131/"
2
bevacqua

いいえ、それはフィッシングの水門を開くからです。変更できるURIの唯一の部分はフラグメント（#の後のすべて）です。 window.location.hashを設定することでこれを行うことができます。

1
vcsjones

リダイレクトせずにロケーションバーのURL全体を実際に変更することはできません（セキュリティの問題を考えてください！）。

ただし、hash部分（#の後）を変更して、それを読み取ることができます：location.hash

ps。リンクのデフォルトのonclickリダイレクトを次のような方法で防止します。

$("#link").bind("click",function(e){
  doRedirectFunction();
  e.preventDefault();
})
0
Max