7

新しいセクションがajax経由でフロントページに読み込まれると、History.jsを使用してURLを動的に設定するWebサイトを実装しています。

これはうまく機能しているように見えますが、History.js が Internet Explorer のフォールバックとして作成する 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 ファイルは、 http://example.com/public/category_a などの URL を http://example.com にリダイレクトします。ここで、javascript が URL を解析し、changeState ハンドラーの ajax 要求を介して適切なセクションを読み込みます。

JavaScript は、次のような URL をチェックします。

http://example.com/public/category_a

および Internet Explorer で作成された同等のフォールバック URL の場合、つまり 

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

それはすべて正常に動作します-だから：

Firefoxで、サイトのルートhttp://example.comでサイトを開き、上記のようにリンクをクリックすると、コンテンツが (changeState ハンドラーで) 読み込まれ、URL が History によって設定されます。次のような pushState:

http://example.com/public/category_a

次に別のリンクをクリックすると、URL は次のように設定されます。

http://example.com/public/category_b

IEで、サイトのルートでサイトを開き、上記のようにリンクをクリックすると、コンテンツが読み込まれ、URL が次のようにハッシュで設定されます。

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

次に次のリンクをクリックすると、URL は次のように設定されます。

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

この問題は、Firefox でブックマークされたページを IE で開いたときに発生し、URL にハッシュが含まれていません。いつもの例を見てみましょう:

http://example.com/public/category_a

この URL を IE で直接開いたり、ブックマークを使用したり、ブラウザのアドレス バーに貼り付けたりすると、.htaccess が正常にリダイレクトされ、js ファイルによって URL が正常に解析され、コンテンツが読み込まれます。ただし、category_b リンクをクリックすると、URL は History.pushState によって次のように設定されます。

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

私が本当に望んでいたのは、URLを次のように設定することでした:

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

ただし、History.js は前の URL 全体を後続の pushStates のベース URL として使用しているようです。History.pushState に絶対 URL を設定しようとしましたが、成功しませんでした。上記のコード ブロックでわかるように、IE 固有の pushState ステートメントがあります。これをさまざまな方法で構成しようとしました。History pushState を認識させるにはどうすればよいですか:

http://example.com

URL の基本部分として、ハッシュ セクションを追加する必要があるのはどれですか? または、上記の方法よりもこれにアプローチするためのより良い方法はありますか?

4

1 に答える 1

0

私の知る限り、履歴 API は、最初のページの読み込みで要求された URL 全体 (sans ハッシュ) を常に使用します。ページが読み込まれたら、履歴 API を使用して最初の URL の後に続くものを変更したり、ハッシュの変更を使用して最初の URL の後に来るものを変更したりできますが、ページ全体をリロードせずに変更する方法はありません。

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

私の意見と実践では、履歴 API を使用せず、代わりにハッシュ変更を使用します。これは、どこでも機能するためです。必ずしもきれいにできるとは限りませんが、ハッシュに加えて、URL に対して適切な Web サーバーの応答が得られるように努力する必要があると思います。これは私の Web サイトからの特に見苦しい URL です: http://www.respectfulrevolution.org/road/videos/ian_barlow_finding_our_roots_forest#/road/videos/marcy_westerling_livingly_dyingですが、ブラウザーにロードすると、サーバーはここに表示されている内容で応答します。 : 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

于 2015-10-16T04:12:40.803 に答える