0

ページの一部を 2 つの個別の iframe 内に表示することはできますか?これらの iframe のいずれかで行った変更は、もう一方の iframe に反映されますか?

part.html

+-------------+--------------------------------------------------------------------+
|             |                                                                    |
|   part 1    |                                                                    |
|             |                                                                    |
+-------------+                                                                    |  
|                                                                                  |
|                                                                                  |  
+-------------+                                                                    |         |             |                                                                    |
|   part 2    |                                                                    |
|             |                                                                    |
+-------------+                                                                    |             |                                                                                  |
|                                                                                  |
+----------------------------------------------------------------------------------+

フレーム 1 は part.html のパート 1 をロードします

フレーム 2 は、part.html のパート 2 をロードします。

main.html

+----------------------------------------------------------------------------------+
|                                                                                  |
|                                                                                  |
|  +----------------+                                                              |
|  |                |                                                              |
|  |                |                                                              |
|  |     frame 1    |                                                              |
|  |                |                                                              |
|  |                |                                                              |
|  +----------------+                                                              |
|                                                                                  |
|                                                                                  |
|                                                        +---------------+         |
|                                                        |               |         |
|                                                        |               |         |
|                                                        |     frame 2   |         |
|                                                        |               |         |
|                                                        |               |         |
|                                                        +---------------+         |
+----------------------------------------------------------------------------------+

個別にロードされていないかのように、iframe を 1 つのページとして引き続き機能させたいのですが、これを行う方法はありますか?

4

2 に答える 2

1

私は iframe を使用しませんが、何らかのフレームを自分でスクリプト化します。

ビューポートとして 2 つの div を使用し、両方のテキストを共有クラスを持つ div に埋め込むことで、それらを上下に移動できます。ビューポートは、ページの残りの部分をブロックします。jquery を使用すると、スクロール イベントをキャッチでき、両方のページを上下に移動できるはずです。(インテントは、テキストの 1 つをクリックすることで起動されます)。

アイデアを提供するために、フィドルを作成しました：http://jsfiddle.net/SGSDs/5/

更新: AJAX を使用して外部ページを読み込むことができます。これは良いチュートリアルです: http://webhole.net/2009/06/13/ajax-page-loading-with-jquery/

HTML:

<div class="viewport"><div class="remotepage" id="part1">Lorem ipsum dolor sit amet...</div></div>
<hr>
<div class="viewport"><div class="remotepage" id="part2">Lorem ipsum dolor sit amet...</div></div>

CSS:

.viewport {
  width: 200px;  
  height: 200px; 
  overflow: hidden;
  position: relative;
}

.remotepage {
  position: absolute;
  top: 0px;
}

#part2 {
    margin-top: -200px;
}

jQuery:

$(function() {   
    $(document).on("click", ".remotepage", function() {
        $(".remotepage").animate({ top: "-=50px" }, 0);
    });
});
于 2012-11-13T09:32:07.360 に答える
1

これを実現するにはいくつかの方法があります。最初に、各ページ呼び出し (part.php?part=1 / part.php?part=2) にパラメーターを単純に追加し、適切なコンテンツで応答するロジックを part.php ファイル内に追加できます。

しかし、実装しようとしていることを実現するためのより良い方法があると確信しています。まず、これを読んで、フレームを使用するよりも優れた方法がある理由を理解してください。

http://www.hobo-web.co.uk/website-frames/

http://www.free2code.net/tutorials/view/replace_frames_with_php_tables-27/page1.html

(2 番目の例ではテーブルを使用していますが、「インクルード」に注目する必要があります)

次に、構造を調べて、「part.htm」ファイルを分割する解決策を見つける必要があります。すべてのコンテンツに対して 1 つのファイルを使用すると、非常に扱いにくくなる可能性があります。

于 2012-11-13T09:02:17.967 に答える