需要 HTML 框架的替代品（我现在知道为什么它们是邪恶的）

Question

总而言之，我正在尝试制作实时页面渲染（浏览网站），同时具有功能覆盖菜单。

我可能在设计应用程序时犯了一个错误，并且需要框架的替代方案。对此有任何建议表示赞赏。

因此该应用程序的目标是分析网页内容。它有一个全局菜单，其中包含常用的内容：配置文件、注销、设置。带有标准法律内容的全局页脚，中间是所有功能的所在。

我知道其中一个功能是网站的实时渲染，菜单覆盖在底部。有了它，他们可以查看元素并就其中的内容撰写评论。

每个功能都嵌入在框架内，因此如果我单击页面视图按钮，框架将弹出到框架页面并转发它。问题就在这里。为了获得站点的实时渲染并以这种方式使用它，我必须将一个框架放在一个框架内，因此重复的滚动条诞生了。

如果有人对布局如何工作感到困惑，这里有两张照片。 http://s1180.photobucket.com/albums/ x406/0vertone/?action=view&current=pageviewlayout.jpg 和一个更干净的设计师模型（主要只是全局菜单） http://s1180.photobucket.com/albums/ x406/0vertone/?action=view&current=globalview.jpg

我已经对其进行了编码，对于覆盖菜单，我尝试了手风琴和一个可以滑动的 css 风格的东西。您可以在此处查看代码。

全球菜单： 将其另存为 global.html.erb http://paste.ubuntu.com/648135/

页面浏览： 将其另存为 pageview.html.erb http://pastebin.ubuntu.com/648146/ 完成此操作后，它应该按您的预期工作。

技术或完成方式是可以选择的，但设计不是。 现在看看，在实时网站底部但页脚上方的页面视图上。需要有一个可以滑入滑出的覆盖菜单。如果有人对如何实现网站的实时视图和覆盖菜单有任何想法，我会洗耳恭听。

谢谢

---

快速摘要：

我想要实现的是一个具有在所有页面上保持一致的全局菜单的应用程序。在这个全局菜单的中间是一个框架，可以转到我创建的其他页面，例如列表视图、统计数据和页面视图。

页面视图是我目前正在研究的。页面视图中有 2 个组件， 网站的实时视图（无论他们想要什么页面）和底部的覆盖菜单。就像页面底部的 YouTube 播放列表一样。问题是，为了将网站的实时渲染放入框架中，您需要在 iframe 中包含一个 iframe，而我正在尝试解决该问题。

但我并没有将其视为错误，而是寻找替代方案来实现上述目标，

---

---

---

我在pastebin上提供了最终的解决方案： 页面浏览量： http://paste.ubuntu.com/648246/

全局视图： http://paste.ubuntu.com/648250/

基本上是这样 jQuery('#iframeWrapper').height('61%');

Answer 1

这是 CSS 和 div 的快速演示 - 您也许可以使用此方法做您想做的事情。

<style type="text/css">
#holder {position:absolute;left:0;top:0;width:425px;height:350px;z-index:1;}
#menu {position:absolute; left:0;top:300px;height:50px;background-color:#f0f;width:425px;z-index:10;}
</style>

<div id="holder">

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=firebox&aq=&sll=53.800651,-4.064941&sspn=17.72791,44.736328&ie=UTF8&hq=firebox&hnear=&z=5&iwloc=A&cid=2836054255231781537&ll=51.386465,-0.138487&output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=firebox&aq=&sll=53.800651,-4.064941&sspn=17.72791,44.736328&ie=UTF8&hq=firebox&hnear=&z=5&iwloc=A&cid=2836054255231781537&ll=51.386465,-0.138487" style="color:#0000FF;text-align:left">View Larger Map</a></small>

</div>

<div id="menu">Nav / whatever goes here</div>

此外，还可以选择使用 ajax 将内容调用到#holder div，而不是使用 iFrame