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

https://stackoverflow.com/questions/136458

02-07-2019
|

質問

JavaScript アクションはどのように実行できますか。ブラウザのURLも変更して、ユーザーがリロードまたはブックマークを押すと、新しいURLが使用されるようにしますか？

[戻る]ボタンで元のURLを再ロードすることもできます。

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

解決

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を使用します。

他のヒント

history.pushStateおよびhistory.popStateをまだサポートしていないブラウザで動作させたい場合、<！> quot; old <！> quot;方法は、フラグメント識別子を設定することです。これにより、ページのリロードは発生しません。

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

jQueryを使用している場合、どちらの方法を使用する hashchangeプラグインがありますブラウザがサポートします。他のライブラリ用のプラグインもあるはずです。

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

window.location.hrefには現在のURLが含まれています。そこから読んだり、追加したり、置き換えることができます。これにより、ページがリロードされる可能性があります。

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

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

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

おそらくこれをしたい理由を説明すると、人々は代替アプローチを提案できるかもしれません...

[2011年の編集：2008年にこの回答を書いて以来、 HTML5テクニックにより、同じオリジンからのものであればURLを変更できます]

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

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

これを行う場合、ハッシュをhrefとして使用するアクションのリンクを使用することがよくあります。次に、リクエストをハッシュしてアクションを決定および委任するjqueryを使用してクリックイベントを追加します。

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

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

リファラーを変更する JavaScript history.pushState()のみを使用します。これは、状態を変更した後に作成されたXMLHttpRequestオブジェクトのHTTPヘッダーで使用されます。

例：

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

pushState（）メソッド：

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

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

状態オブジェクトは、シリアル化できるものであれば何でもかまいません。 Firefoxはユーザーがブラウザを再起動した後に復元できるように状態オブジェクトをユーザーのディスクに保存するため、状態オブジェクトのシリアル化された表現には640k文字のサイズ制限を課しています。シリアル化された表現がこれよりも大きい状態オブジェクトを<=>に渡すと、メソッドは例外をスローします。これ以上のスペースが必要な場合は、sessionStorageやlocalStorageを使用することをお勧めします。
タイトル <！>＃8212; Firefoxは現在このパラメーターを無視しますが、将来使用する可能性があります。ここで空の文字列を渡すことは、メソッドへの将来の変更に対して安全であるはずです。または、移動先の州の短いタイトルを渡すこともできます。
URL <！>＃8212;新しい履歴エントリのURLは、このパラメーターによって指定されます。ブラウザは<=>の呼び出し後にこのURLのロードを試行しませんが、ユーザーがブラウザを再起動した後など、後でURLのロードを試行する場合があることに注意してください。新しいURLは絶対である必要はありません。相対である場合、現在のURLを基準にして解決されます。新しいURLは、現在のURLと同じ起源でなければなりません。そうでない場合、<=>は例外をスローします。このパラメーターはオプションです。指定されていない場合は、ドキュメントの現在のURLに設定されます。

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

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が続くことに注意してください。

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

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

私のために働いているのは-history.replaceState()次のような関数-

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

これはページをリロードしません。javascriptのイベントで使用できます

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

つまり、ユーザーがページにいるとしましょう：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を使用してさまざまなメソッドの時間外勤務を処理する場合、そのデータは履歴状態ごとに保存されません。

私のコードは：

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

これですべて：）

成功しました：

location.hash="myValue";

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

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

私が提示するより簡単な答え、

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

これにより、ブラウザURLのドメイン名の後に/abcが追加されます。このコードをコピーしてブラウザーコンソールに貼り付け、URLが<！> quot; https://stackoverflow.com/abc <！> quot;

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow