302

現在のページに何らかの影響を与える可能性がありますが、ユーザーがリロードまたはブックマークを押すと新しい URL が使用されるようにブラウザの URL も変更する JavaScriptアクションを作成するにはどうすればよいですか?

また、戻るボタンで元の URL をリロードできるとよいでしょう。

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

4

14 に答える 14

187

history.pushStateまだサポートしていないブラウザで動作させたい場合history.popState、「古い」方法はフラグメント識別子を設定することです。これにより、ページがリロードされることはありません。

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

jQueryを使用している場合は、ブラウザーがサポートする方法を使用するハッシュ変更プラグインがあります。他のライブラリ用のプラグインもあると思います。

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

于 2008-09-25T22:08:40.663 に答える
122

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代わりにを使用してください。

于 2010-11-19T06:20:18.737 に答える
37

window.location.href には現在の URL が含まれています。そこから読み取ったり、追加したり、置き換えたりすることができます。これにより、ページのリロードが発生する場合があります。

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

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

于 2008-09-25T22:19:36.673 に答える
21

もしそうなら、それは信じられないほどのセキュリティ問題になるので、私はこれが不可能であると強く思うでしょう。たとえば、銀行のログインページのようなページを作成し、アドレスバーのURLを実際の銀行のように見せることができます。

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

[2011年に編集：2008年にこの回答を書いたので、同じ出所からのものである限りURLを変更できるHTML5技術に関するより多くの情報が明らかになりました]

于 2008-09-25T22:07:09.247 に答える
9

jQueryには、ブラウザーの URL を変更するためのjQuery-pusherという優れたプラグインがあります。

JavaScriptpushStateと 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 ヘッダーで使用されるリファラーを変更するJavaScript のみを使用します。history.pushState()

例：

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

pushState() メソッド:

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

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

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

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

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

于 2013-10-08T21:04:06.183 に答える
8

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

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

これを行うときは、ハッシュをhrefとして使用するアクションのリンクを使用し、要求されたハッシュを使用してアクションを決定および委任するjqueryを使用してクリックイベントを追加することがよくあります。

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

于 2008-09-25T22:11:14.370 に答える
4

これを処理できるYahooYUIコンポーネント（Browser History Manager）があります：http：//developer.yahoo.com/yui/history/

于 2008-09-25T23:47:45.043 に答える
3

Facebook のフォト ギャラリーでは、URL に #hash を使用してこれを行います。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 が続くことに注意してください。

于 2011-01-11T15:43:21.650 に答える
2

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

これが必要だと思います。

于 2011-04-20T14:03:27.483 に答える
1

私のコードは次のとおりです。

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

それで全部です ：）

于 2013-10-29T18:07:14.100 に答える
1

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

たとえば、ユーザーが次のページにいるとしましょう: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が異なるメソッドのオーバータイムを処理するために使用される場合、そのデータは履歴状態ごとに保存されません。

于 2009-03-31T20:33:38.690 に答える
0

私は成功しました：

location.hash="myValue";

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

var articleId = window.location.hash.replace("#","");
于 2014-06-23T11:56:41.333 に答える