0

私は、いくつかの jQuery アニメーションで AJAX 読み込みを使用する Web サイトに取り組んでいます。

JavaScript を使用して、動的に生成された PHP ベースのページへのリンクから href を取得し、その href を URL に (避けられない #/ の後に) 追加します。

ユーザーがページをブックマークしてアクセスしようとした場合を除いて、ユーザーは、アクセスする予定のページではなく、ホームページにアクセスします。

したがって、Web サイトの内部リンクをクリックするのではなく、ページに直接アクセスする場合は、URL から #/ を削除しますが、その後はすべて保持して、URL を次のようにブックマークします。

http://www.mysite.com/#/somepage

次のように書き換えられます。 

http://www.mysite.com/somepage

次に、適切なページ ( ) の読み込みが完了したら、ページをリロードせずに #/ を URL ( ) のhttp://www.mysite.com/somepage元の場所に戻したい(これは、私が使用している巧妙なスニペットのおかげで、残りのナビゲーションは正常に機能します。)http://www.mysite.com/#/somepage

そう：

  1. ページが読み込まれる前に、URL を確認し、含まれている場合は#/削除してください。
  2. ハッシュレス URL にあるページを読み込む
  3. #/ページをリロードせずに で URL を再表示します。

それは実行可能ですか？もしそうなら、私はレッスンに感謝します。

4

3 に答える 3

1

あなたがやろうとしていることは実行可能ですが、維持するのは完全な PITA であり、すべてのブラウザーで利用できるわけではありません。それはさておき、キーはhistory、新しい「トリック」のセットを追加するために比較的最近拡張されたオブジェクトにあります。その完全なドキュメントはMDN から入手できます。

これを行うために必要なのはreplaceStateコマンドです。次のように読みます。

指定されたデータ、タイトル、および指定された場合は URL を持つように、履歴スタックの最新のエントリを更新します。データは DOM によって不透明として扱われます。シリアル化できる任意の JavaScript オブジェクトを指定できます。現在、Firefox は title パラメータを無視することに注意してください。詳細については、ブラウザ履歴の操作を参照してください。

これにより、ブラウザの履歴で現在のページを置き換えることができますが、URL では置き換えられません。URL はあなたが持っているものとまったく同じです - ハッシュ付きです。あなたのソリューションを考慮して変更しても意味がありません。

historyただし、一貫性を保つために、ハッシュレス ページがオブジェクトを持つクライアントのハッシュありページにリダイレクトされるようにする必要があります。それが唯一の要件です。

于 2013-06-03T13:52:55.850 に答える
0

ページを読み込む前に URL を確認し、#/ が含まれている場合は削除します。

ありえない。フラグメント ID はサーバーに送信されないため、クライアント側のコードでのみアクセスでき、ページをロードする (または少なくともロードを開始する) 必要があります。

ハッシュレス URL にあるページを読み込む ページ
をリロードせずに #/ で URL を再表示する

XMLHttpRequestを使用してデータを取得し、DOMを使用してドキュメントを変更して使用し、history APIを使用してアドレス バーの URL を変更します。

于 2013-06-03T13:51:25.987 に答える
0

回答の 1 つで指摘されているように、ページが読み込まれる前にハッシュを削除することはできません。

ただし、ページの読み込みが開始されると、質問に記載されている操作が可能になります。

これを行う1つの方法を次に示します。

// Remove the hash and reload the page at url without hash 

if (window.location.href.indexOf('/#/')>=0) {
    window.location = window.location.href.replace(/\/#\//, '/');
}

新しいページの読み込みが開始されたら、history.pushStateを使用して URL 表示を更新できます。

if ((window.location.href.indexOf('/#/')<1) && (location.pathname != "/")) {
     history.pushState({}, "page x",  location.protocol + '//' + location.host + '/#' + location.pathname);
}

ただし、pushStateこれは Gecko 2.0 で開始されたブラウザーでのみ利用可能であるため、ハッシュを URL に戻すことは古いブラウザーでは機能しないことに注意してください。

これは、いくつかの不幸な状況につながる可能性があります。たとえば、仮説として、あなたの URL http://www.mywebsite.com/somepageは検索エンジンによってインデックスに登録されます。ユーザーはそのリンクをクリックし、pushState をサポートしていない古いブラウザーで Web サイトにアクセスし、AJAX 対応の Web サイトを閲覧しているときに別のリンクをクリックします。そのユーザーが到達する可能性が高い

http://www.mysite.com/somepage/#/someotherpage

そして、ユーザーがクリックし続けると、悪化し続けます。

http://www.mysite.com/somepage/#/someotherpage/#/yetanotherpage/#/andsoon/#/andsoforth/

したがって、おそらく必要なのは、ハッシュが伝播し続けないようにするためのものです。

ハッシュの削除/置換コードを条件付きでラップすることもできます。

if (history.pushState) {
// add hash
} else {
// provide some alternative
}

最後に、これら 2 つのリソースを調べます。ハッシュはまったく必要ないかもしれません: History.jsとjQuery Address。

于 2013-06-04T13:19:52.123 に答える