0

次のjQueryコードがあります：

$(function() {
    var linkSet = $('#link1').add('#link2');
    linkSet.click(function() {
    linkSet.toggle();
        if ($(this).attr('id')=='link1'){
        $('#frame').attr('src', 'www.google.com');
        } else if ($(this).attr('id')=='link2'){
        $('#frame').attr('src', 'www.yahoo.com');
        }
    });
});

ページロード時に、id のリンクlink1が表示されますが、link2は非表示になります。ユーザーが をクリックするlink1と、 がlink1表示され、link2その逆も同様です。トグルが行われている間、 という名前の iframe のソースも変更されframeます。

ここでの問題は、戻るボタンを押すと、フレームのコンテンツが以前のコンテンツに戻るが、リンクが変更されないことです。ここで何を見逃したのですか？前もって感謝します！

注: リンクは Web ページ上にあり、その Web ページ内には iframe があります。

編集：

<div id="header">
<ul>
    <li><a id="link1" href=#">Link1</a>
    <li><a id="link2" href=#">Link2</a> 
</ul>
</div>
<div id="iframe">
    <iframe id="frame" src="www.google.com"></iframe>
</div>
4

1 に答える 1

1

ブラウザの戻るボタンを右に押したときのことです。

もしそうなら：

問題は、履歴の変更 ([戻る] ボタンをクリックしたときなど) に応答する唯一の簡単な方法であるため、履歴が変更されたときにトリガーするイベントが必要なことです。iframe の URL は実際に変化しているため、当然 [戻る] ボタンの影響も受けます。

戻るボタンなどを押したときに他の非履歴ベースのロジックを機能させるには...これを行うには2つの方法があります。新しい方法は history API を使用するもので、もう 1 つの方法はよりサポートされており、URL にハッシュを追加する方法です。

これは何を意味するのでしょうか？

ボタンをクリックすると、URL がハッシュで変更されます。URLのように

「http://domain.com/blah/#myHash」

次に、クリックでロジックを実行する代わりに、ハッシュが変更されたときに実行します。このように、ユーザーが前後にクリックすると、ロジックは常に完全に実行されます。

数か月前に、この手法に関する記事全体をhttp://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/で書きました。

于 2013-08-07T03:39:13.547 に答える