javascript - 効果のあるiframe srcを変更しますか?

Question

私は単純な Web アプリを作成しています<a>。タグを使用する代わりに、iframe の SRC を変更するナビゲーション リンクが必要です。これが発生した場合、古いページを「スライドアップ」してiframeからすばやく外に出し、新しいページをロードする方法はありますか? 可能であれば、HTML、Javascript、および CSS のみを使用したいと考えています。

Answer 1

読み進める前に聞いておきたいのですが、本当に iframe が必要ですか? Web サイトに Web サイトをロードすることは、文字通り代替手段がない場合を除き、避けるべきことです。これは遅く、通常、ブラウザー間で多くの問題を引き起こします。

これをナビゲーションに使用している場合、代わりに AJAX を使用して新しいコンテンツをロードすることは可能でしょうか? または、考えられるすべてのコンテンツを最初にロードし、1 つを除いてすべてを非表示にすることもできます。

ところで、まだ経験の浅い方のために (間違った印象を持っていたら申し訳ありません)、AJAX という言葉を恐れないでください。これは、ページをロードした後、サーバーにデータを送信し、返されたものを処理できるようにする単純な Javascript 関数です。XML HTTP 要求とも呼ばれます。

いずれにせよ、jQuery (http://jquery.com) やプロトタイプ (http://prototypejs.org/) などの Javascript フレームワークを使用すると、作業がはるかに簡単になります。

代替手段が見つからない場合:

1) JS を実行するリンクは簡単<a href="#" onclick="return own_javascript_function();">です<a href="javascript:my_function()">。

2）関数に新しいコンテンツで新しいiframeを作成させ（var newframe = new HTMLIFrameElement()次にsrcなどを設定）、前のiframeの下に挿入します。低い z-index を指定して、他のものの下に非表示にします。

position:relative3) iframe をスライドさせる: で iframeを配置するコンテナー div を使用しますposition:absolute。タイマーjavascript_function()を使用して iframe の css-propertytopを 0 から -500 (または iframe の高さ) に変更します。これは、jQuery を使用すると特に簡単に実現できます。それが完了したら、古い iframe を削除し、新しい iframe の z-index を 1 のような値に設定します (z-index をどんどん低くする必要を避けるため)。

<div>ajax を使用して新しいコンテンツをロードする代わりに、 a を使用してもまったく同じことができることに注意してください。外部ドメインからロードしていない限り。

Answer 2

2つのオプションが思い浮かびます。

jQuery を使用していない場合は、調べてみることをお勧めします。

1) マスクを使用します。ユーザーがリンクをクリックすると、マスクがページ コンテンツ上でフェードインします (位置: 絶対、上: 0、左: 0、幅: 100%、高さ: $windowHeight、色: #{mask-color})。フェードインが完了したら、新しいコンテンツで iframe をリロードします。次に、マスクをフェードアウトします。

注: (fadeIn/fadeOut をスライド効果の slideUp/slideDown に置き換えます。jquery 効果を参照してください: http://api.jquery.com/category/effects/ )

フェードアウト：

$('#elemendId').fadeOut();

フェードイン：

$('#elemendId').fadeOut();

デフォルトのフェード時間は500だと思うので、ページをロードするコードのタイムアウトを設定する必要があります

setTimeout(function() { ... load new iframe ... }, 500)

2) iFrame を破棄し、コンテンツに対して AJAX 要求を実行します。何かのようなもの

$.post('path/to/file.html', function(data) {
 $('#destination-div').html(data)
});

はるかに簡単で、おそらく多くの問題に遭遇することはありません。

編集：方法＃1が機能するかどうかは実際にはわかりません...iframeにマスクを配置できるかどうかを忘れています