2012-06-06 12 views
8

私は、新しいセクションがajax経由でフロントページに読み込まれるときにHistory.jsを使用して動的にURLを設定するWebサイトを実装しています。Internet ExplorerとpushStateのHistory.jsのフォールバック問題

これはうまくいくようですが、Internet ExplorerでHistory.jsがフォールバックとして作成するURLのハッシュセクションに問題があります。ここで

は、ページ上のリンクの例であり、jqueryのを使用して作成:

function connect_browse_buttons(){ 
    $('.browselink').each(function(){ 
     $(this).click(function(){ 
      var action = $(this).attr('name'); 
      action = action.substring(('action_browse').length); 
      browsetype = action; 
      if (isIE){ 
       // remove data object and title to avoid use of SUIDs by History.js in IE 
       History.pushState(null, null, '/public/' + action); 
      } else { 
       History.pushState({oldurl: History.getState()['url']}, "Example " + action, config.wwwroot + "public/" + action); 
      } 
      return false; 
     }); 
    }); 
} 

.htaccessファイルには、このようなjavascriptのは、URLを解析し、AJAXを経由して、適切なセクションをロードhttp://example.comからhttp://example.com/public/category_a、などの任意のURLをリダイレクトしますchangeStateハンドラ内のリクエスト。すべてがOKに動作するような

http://example.com/public/category_a 

などとInternet Explorerで作成された同等の代替URLのURLの

javascriptのチェック、すなわち

​​

- そう:Firefoxので

、私がサイトのルートでサイトを開けば、http://example.com、そして上記のようなリンクをクリックすると、内容は広告(changeStateハンドラ内)、およびURLは次のようにHistory.pushStateによって設定されます。

http://example.com/public/category_b 

:私は、その後のURLは、例えば、として設定されている別のリンクをクリックすると

http://example.com/public/category_a 

IEで、私のように、サイトのルートにサイトを開き、そして上記の通り、リンクをクリックして、コンテンツのロード、およびURLがハッシュに設定されている場合:私は、場合

​​

cl次のリンクでICKは、URLは以下のように設定されている:

http://example.com/#public/category_b 

問題は、私はFirefoxでブックマークしてIEでページを開いたときにを生じ、URLにハッシュを持っていません。私はIEで直接このURLを開くと、ブックマークを介して、またはブラウザのアドレスバーにURLを貼り付けて、.htaccessファイルが正常にリダイレクト

http://example.com/public/category_a 

、URLはJSでOK解析されます。私たちのいつもの例を見てみましょうファイルが読み込まれ、コンテンツが読み込まれます。しかし、今私はcategory_bリンクをクリックすると、URLがにHistory.pushStateによって設定されます、しかし

http://example.com/#public/category_b 

履歴:

http://example.com/public/category_a#./category_b 
私が本当に欲しかった何

はとしてURLを設定することでした。 jsは、後のpushStatesのベースURLとして、前のURLの全体をとるようです。私はHistory.pushStateで絶対URLを設定しようとしましたが、成功しませんでした。上のコードブロックでわかるように、IE固有のpushStateステートメントがあります。私はこれをさまざまな方法で設定しようとしました。どのように私は歴史pushStateを認識するために取得することができます:ハッシュセクションはに追加されるURLのベース部分として

http://example.com 

? これには、上記の方法よりも良い方法がありますか?

+0

こんにちは、あなたは、ページが更新されたときに問題の解決策を見つけることができましたか、ブラウザは現在のURLの代わりに最初のURLを読み込みますか? –

+0

あなたはこの質問を読まれましたか?:http://stackoverflow.com/questions/14342912/using-history-pushstate-in-ie9多分あなたは役に立つヒントを見つけることができます – nikoskip

+0

なぜpublic/category_aにpushstateして "redirect"するの? pushstateが動作するときに#を削除するには? –

答えて

0

AFAIKでは、ヒストリAPIは最初のページの読み込みに要求されたURL全体(ハッシュ値)を常に使用します。ページがロードされたら、ヒストリAPIを使用して最初のURLの後ろにあるものを変更するか、ハッシュ変更を使用して最初のURLの後ろにあるものを変更できますが、ページ全体を再ロードせずに変更する方法はありません。

あなたが探しているものを達成するために知っている唯一のオプションは、サーバーにすべてのURLを目的のベースURLにリダイレクト/リライトしてから、パス、ファイル名、パラメータ、ハッシュなどをクライアント側ルータ/コントローラ。 Facebookで共有されているあなたのウェブサイトからのリンク(あまり詳しくない)はいつもhttp://example.com/か、あなたのベースURLが何であれ、これに対して助言する必要があります。

私の意見では、私の練習では、ヒストリーAPIを使用せず、代わりにハッシュ変更を使用しています。必ずしもそうとは限りませんが、ハッシュに加えてURLに対して適切なWebサーバーの応答を得るよう努力すべきだと思います。これは私のウェブサイトのhttp://www.respectfulrevolution.org/road/videos/ian_barlow_finding_our_roots_forest#/road/videos/marcy_westerling_livingly_dyingからの特に醜いURLですが、ブラウザにロードすると、ここに表示されている内容でサーバが応答します:http://www.respectfulrevolution.org/road/videos/ian_barlow_finding_our_roots_forestそして、クライアント側のコントローラがそれ以降ロードしなければならないものをロードします:http://www.respectfulrevolution.org/#/road/videos/marcy_westering_livingly_dying 同じ:http://www.respectfulrevolution.org/road/videos/marcy_westering_livingly_dying

関連する問題