1

  1. 私のホームページから、これを と呼びましょう。次の値mysite.comを持つリンクをクリックします。したがって、URL全体は（ブラウザはURLの最後に追加しますが、プラグインが正常に機能するためにはパラメータの前にある必要があります）。href/home/home.php?doc=gymmysite.com/home/home.php?doc=gym##

  2. そのページから、そのイベントをキャッチしたリンクをクリックし、いくつかの Ajax データをロードして、URLをhome.phpに変更したいと考えています。つまり、コンテンツがロードされるとすぐに、where url =を実行します。mysite.com/home/home.php?doc=gymmysite.com/home/home.php?doc=pilatesHistory.pushState(null, null, url);?doc=pilates

  3. ここで問題が発生します。たとえば、Internet Explorer 8 では、新しい URL はmysite.com/home/home.php?doc=gym#home.php?doc=pilatesではなく: ですmysite.com/home/home.php?doc=pilates。

  4. そして、これが起こるのは、私がステップで最後に言ったことのせいだと思います1.

  5. 別のリンクをクリックしてメソッドを実行すると、シンボルの後にあるため、関数の 3 番目のパラメーターとして記述したパラメーターにpushState置き換えられます。?doc=pilates#

4

2 に答える 2

2

いくつかのコード例はいいでしょうが、あなたの説明から、history.js を正しく実装していないと思います。

href クリック イベントで状態をプッシュしてからイベントをキャッチし、statechangeそこで ajax の読み込みと dom 操作を行う必要があります。

statechange関数を呼び出すとイベントが発生するため、そのように使用する必要がありpushStateます。

Shikyoによる編集：

つまり、コンテンツがロードされるとすぐに、History.pushState(null, null, url); を実行します。

それが、あなたがそれを正しく使用していないという考えを得た理由です。pushStateその後、statechangeイベントでコンテンツをロードして dom を更新する必要があります。最初に dom を更新せず、次に を呼び出しますpushState。

html4 ブラウザーの初期状態に関しては、history.js プラグインが初期状態変更イベントを発生させることはありません。

HTML 4 ブラウザーで初期状態を処理するための 2 つの解決策を見つけました。

1) ドキュメント準備完了イベントを呼び出しHistory.getState()、初期状態を処理します。

2) statechange イベントを自分でトリガーします。

// If pushState is emulated (html4 browsers) and we have a hash (a '#' in the url) trigger the statechange event
if (History.emulated.pushState && History.getHash())
{
    $(document).ready(function()
    {
        History.Adapter.trigger(window, "statechange");
    });
}

statechangeそしてもちろん、イベント内で操作された DOM を処理します。

ksairiによる編集2：

更新として、私は ajax コンテンツを読み込んでいるので、コンテンツの読み込みは URL に影響せず、pushstate も読み込みに影響しないため、読み込み時と URL の変更時は問題ではないと思います。たぶん、私が理解していない何かがあります。

実際、デモのコードの一部は次のとおりです。

        (function(window,undefined){

            var
                History = window.History,
                State = History.getState(),
                $log = $('#log');

            // Log Initial State
            History.log('initial:', State.data, State.title, State.url);

            // Bind to State Change
            History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
                // Log the State
                var State = History.getState(); // Note: We are using History.getState() instead of event.state
                History.log('statechange:', State.data, State.title, State.url);
            });

        })(window);

ご覧のとおり、History.getState() が実行され、IE8 でテストしました。

html5 ブラウザーでは、ページに移動したときに statechange を実行するのではなく、pushstate を実行するときに実行します。html4 および html5 ブラウザーの両方で。

Shikyoによる編集3：

これが、初期状態で html4 ブラウザーで何か特別なことをする必要がある理由です。

html5 ブラウザーでは、実際の URL が変更されます。たとえば、html4 ではからhttp://mysite.com/に変更されます。http://mysite.com/page/1http://mysite.com/#page=1

URL は実際には変更されず#、ハッシュと呼ばれる の後のビットのみが変更されることに注意してください。

サーバーはハッシュの背後にあるものを認識しないため、html5 ブラウザではサーバーがロードhttp://mysite.com/page/1され、html4 ブラウザでは の後のすべて#がサーバーによって無視されるため、URL はhttp://mysite.com/.

html5 ブラウザーでは、URL が正しいアドレスを指しているため、正しいコンテンツが読み込まれます。html4 ブラウザーでは、コンテンツが初めてロードされず、statechangeイベントがトリガーされないため、初期状態を手動で処理する必要があります。

この問題の可能な解決策については、私の最初の編集を参照してください。

于 2012-10-01T22:07:22.353 に答える
0

Shikyo、私はあなたが私に言ったことをしました。それは実際に私を助けました.戻るボタンと進むボタンは正しい内容を表示するようになりました. ありがとう、私はそれらの行動について考えていませんでした。残念ながら、この問題は html4 ブラウザーでも解決されません。ページはgalagym.com/home/home.phpです。左側のさまざまなセクションに入ると、もちろん html4 ブラウザで URL の間違った動作を確認できます。html5 ブラウザーでは完全に動作します。

あなた/誰かが私にメモを与えることができれば、それは素晴らしいことです.

ありがとう！

于 2012-10-04T22:54:51.910 に答える