iframe srcを有効に変更しますか？

Question

私はシンプルなウェブアプリケーションを作っていますが、<a>タグを使用する代わりにiframeのSRCを変更するナビゲーションリンクが必要です。これが起こると、古いページを「スライドアップ」してiframeから素早く取り出し、新しいページを読み込ませる方法がありますか？可能であれば、HTML、Javascript、およびCSSのみを使用したいと考えています。

Answer 1

の上にマスクを置くことができる場合、私は忘れて...実際にメソッド＃1が動作するかどうかわからないんだけどiframe？ウェブサイトにウェブサイトを読み込むことは、文字通り代替手段がない限り避けるべきことです。それは遅く、一般的に多くのブラウザで問題を引き起こします。

これをナビゲーションに使用している場合、確かにAJAXを使用して新しいコンテンツを読み込むことは可能でしょうか？または、可能なすべてのコンテンツを最初にロードし、それらのすべてを非表示にすることができます。

ところで、あなたはあまり経験がない場合（誤っていると謝罪します）：AJAXという用語を恐れないでください。これは単に、サーバーにデータを送信し、ページをロードした後に返すものを処理するJavascript関数です。 XML HTTPリクエストとも呼ばれます。

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

あなたは何の代替表示されない場合：<a href="#" onclick="return own_javascript_function();">または、例えば<a href="javascript:my_function()">：JSが簡単で実行

1）リンク。

2）新しいコンテンツ（var newframe = new HTMLIFrameElement()、srcなどを設定）を使用して関数に新しいiframeを作成し、それを前のiframeの下に挿入します。他のものの下にそれを隠すために、より低いz-インデックスを与えます。

3）iframeをスライドさせます。position:relativeのコンテナdivを使用して、iframeをposition:absoluteに置きます。 javascript_function()はiframeのCSSプロパティーtopを0から-500（またはiframeの高さ）に変更するためにタイマーを使用します。これはjQueryで特に簡単に実行できます。それが終わったら、古いiframeを削除し、新しいiframeのz-indexを1のように設定します（z-インデックスを低くしたり小さくする必要がないようにします）。

代わりに、<div>と全く同じように、代わりにajaxを使用して新しいコンテンツを読み込むことができます。ただし、外部ドメインから読み込んでいない限り

Answer 2

2つのオプションがあります。

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

1）マスクを使用してください。ユーザーがリンクをクリックすると、マスクはページの内容（位置：絶対、上：0、左：0、幅：100％、高さ：$ windowHeight、色：＃{マスク色}）上​​にフェードインします。フェードインが完了したら、新しいコンテンツでiframeをリロードします。次に、マスクを消してください。

注：（参照、スライド効果を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) 
}); 

もっと簡単に、あなたはおそらく多くの問題にぶつからないでしょう。

EDIT：あなたは本当に必要なのです：私はあなたが私はあなたを聞いてみましょう読み続ける前にあなたはインラインフレーム