0

iframe タグがあり、jquery アニメーションを使用して動的に変更したいと考えています。たとえば、iframe はホームページにあり、about リンクをクリックすると about.html が読み込まれ、準備ができたらアニメーションを使用して下にスライドします。私はそれの基本的なロジックを持っていますが、それからこれについて来ました

問題：

ページを更新すると、index.html ページのコンテンツが読み込まれます。ページを更新しても、about.html のコンテンツは保持されます。

  <a href="about.html" target="content">About</a> 
  <iframe id="content" name="content" align="top" src="index.html" 
      frameborder="0" width="100%" height="1200px" scrolling="no">
  </iframe>

これは最も基本的なロジックにすぎませんが、リフレッシュ部分をどのように達成するかについて助けが必要です/

それらを同じページに含めないで、ページ遷移をアニメーション化したい場合はどうなりますか。そのため、ユーザーが新しいページへのリンクをクリックすると、ページが読み込まれ、アニメーション化されます.どうすればこれを達成できますか. 最近、LocalScroll と呼ばれる jquery プラグインを見たので、この効果が得られましたが、新しいページでは機能しませんでした。

4

4 に答える 4

1

jQuery プラグイン LocalScroll への参照は正しい方向に進んでいます。実際、適切に実装できれば、問題は解決すると思います。

このプラグイン、jQuery Mobile、およびその他の場所で使用されるアンカーベースのナビゲーションは、window.locationオブジェクトを更新し、ブラウザーのアドレス バーにも反映されるため、明示的なページの更新が発生したときに、ハッシュされた場所が保持されます。

答えは、このローカル リンクをアドレスから解析できるスクリプトを作成することです。これを示す一般的な JavaScript コード ブロックを次に示します。

window.onload=function() {
    var URLParts=window.location.toString().split('#');
    if(URLParts.length>1)
        var lastPage=decodeURI(URLParts[1]);
    else
        return false;
    if(lastPage)
        iframe_load(lastPage,'content');
}
function clear_last_page(location) {
    var URLParts=location.split('#');
    if(URLParts.length<=1)
        return location;
    URLParts.pop();
    return URLParts.join('#');
}
function iframe_load(url,targetID) {
    document.getElementById(targetID).src=url;
    var location=clear_last_page(window.location.toString())+'#'+url;
    window.location.href=location;
}

使い方

イベントがトリガーされるwindow onLoadと、URL でアンカー (ハッシュ) リンクが検索されます。見つかった場合は、これがページへの参照であると想定し、 に渡しますiframe_load()。

この関数は 2 つのことを行います。まず、ターゲットのインライン フレームをパラメーター経由で渡されたページにポイントしurlます。次に、親フレームを架空のアンカーにポイントします。これは、ページが更新された後も保持されます。

したがって、親フレームを更新すると、そのアンカー テキストが取得、解析され、最後に読み込まれたインライン ページを再読み込みするために使用されます。

この関数clear_last_page()は、追加のアンカー リンクが URL に追加されるのを防ぐ単なるヘルパー関数です。

デモンストレーション

次の URL にアクセスしてください。

http://gocontactform.com/stackoverflow/dynamically-change-iframes-content/

リンク「ページ 2」をクリックして、変更を確認します。次に、ページを更新します。

注目に値する

このソリューションは、技術的にはアンカーの通常の機能を引き継ぐことに注意してください。そのため、ページ上で通常どおりアンカー リンクを使用しようとすると、望ましくない結果が生じる可能性があります。

質問でモデル化したもの（属性iframe_load()を使用した従来のリンク）ではなく、そのインラインフレームにバインドされたリンクに依存することを余儀なくされています。target

srcデフォルト属性をインラインで定義しないこともお勧めします。むしろ、onLoadハンドラーに への呼び出しを追加することができiframe_load('page1.html','content')ます。これにより、アドレス内のアンカー リンクで更新するときに、デフォルト ページをロードする不必要な試みを防ぐことができます。

あなたが求めていることを達成する他の方法もあります。しかし、このソリューションは理解しやすく、実装しやすいと思います。

それが役立つことを願っています!

于 2012-06-08T18:36:29.517 に答える
0

ページがロードされるたびに、最後にロードされた src iframe を知るために何かを確認する必要があります。デフォルトでは、ブラウザはこれを認識できません。これを行う 1 つの方法は、クリックしたときにページのハッシュを変更することです。ページが読み込まれるたびに、このハッシュが存在するかどうかを確認し、ハッシュを使用してリンクをトリガーします。

私はこれを書きます: http://jsfiddle.net/estevao_lucas/revsg/4/

Michael が言ったように、History API が役に立ちます。

于 2012-06-08T18:11:12.683 に答える
0

src以下を使用して、iFrameの属性を変更できます。

$("#content").attr('src', 'http://mysite.com/newpage.html');

おっと、質問を読み間違えたようです。

下にスライドさせたい場合は、イベント ハンドラーをloadイベント ( jQuery doc ) にバインドして、フレームの読み込み時に何かを行うことができます。

$("#content").hide();

$("#loadLink").click(function() {
    $("#content").hide();
    $("#content").attr('src', 'http://mysite.com/newpage.html');
});

$("#content").load(function() {
    $(this).slideDown();
});

この例では、リンクをクリックすると iframe が非表示になり、準備が整うと下にスライドします。

デモ

編集：まだ読み違えています！

iframe で最後に表示されたページの状態を保存するには、HTML5 localStorage を使用できます。

iframe の load イベントで、現在表示されているページを保存します。

localStorage['lastPage'] = "about.html"

次にlocalStorage['lastPage']、ページの読み込み時に使用して読み込みます。

更新後のページのスライドと保持の両方を示す更新されたデモ。

于 2012-06-08T17:36:04.403 に答える
0

ありえない。ページを更新すると、ブラウザーはサーバーからページを取得し、すべての JS データを削除することになっています。

History API は役に立ちますが、最新のブラウザーに限られます。

于 2012-06-08T17:37:47.450 に答える