Question

是否可以在两个单独的iframe中显示部分页面，其中我在其中一个iframe中所做的更改会反映在另一个iframe上？

part.html

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

第1帧将加载part.html的第1部分

第2帧将加载part.html的第2部分

main.html中

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

我希望iframe仍然可以作为一个页面运行，就好像它们没有单独加载一样，有没有办法做到这一点？

Answer 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

（第二个例子使用表格，但你应该把注意力集中在“包括”）

然后你应该看看你的结构，也许找到一个解决方案来拆分你的“part.htm”文件。所有内容的一个文件可能变得非常不方便。

Answer 2

我不会使用iframe，而是自己编写某种框架。

通过使用两个div作为视口，并将两个文本嵌入到具有共享类的div中，您可以上下移动它们。然后视口会阻止页面的其余部分。使用jquery，您可以捕获滚动事件，然后您应该能够上下移动两个页面。（现在通过单击其中一个文本来激发意图。）

为了给你一个想法，我为你建立了一个小提琴：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);
    });
});

在页面的两个独立部分中的两个iframe内显示页面的一部分

2 个答案: