0

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

部分.html

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

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

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

main.html

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

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

4

2 回答 2

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”文件。所有内容的一个文件可能会变得非常不方便。

于 2012-11-13T09:02:17.967 回答
1

我不会使用 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);
    });
});
于 2012-11-13T09:32:07.360 回答