需要一个HTML框架的替代品(我现在知道为什么它们是邪恶的)

Need an alternative to HTML frames (I now know why they're evil)

本文关键字：邪恶 为什么 替代品 一个 HTML 框架      更新时间：2023-09-26

总结一下，我想做一个实时页面渲染(浏览网站)，同时有一个覆盖菜单的功能。

我可能在设计应用程序时犯了一个错误，需要一个框架的替代方案。如有任何建议，我将不胜感激。

所以应用程序的目标是分析web内容。它有一个全局菜单，里面有常用的东西:个人资料、退出、设置。一个具有标准法律内容的全局页脚，中间是所有功能的地方。

我知道其中一个功能是在网站的底部叠加一个菜单的实时渲染。有了它，他们可以查看元素，并对那里的内容写注释。

每个函数都嵌入在一个框架中，所以如果我点击了页面查看按钮，这个框架就会发射到框架页面并传递它。问题来了。为了得到一个现场渲染的网站，并使用它的这种方式，我不得不把一个框架内的框架，从而产生了重复的滚动条。

如果有人对布局如何工作感到困惑，这里有2张照片。http://s1180.photobucket.com/albums/x406/0vertone/?action=view&current=pageviewlayout.jpg一个更简洁的设计器模型(主要是全局菜单)http://s1180.photobucket.com/albums/x406/0vertone/?action=view&电流= globalview.jpg

我已经得到了它的编码和覆盖菜单，我尝试了手风琴和css样式的东西滑动。您可以在这里查看代码。

全球菜单:

将其保存为global.html. erbbhttp://paste.ubuntu.com/648135/

页面视图:将其保存为pageview.html.erbhttp://pastebin.ubuntu.com/648146/一旦你这样做了，它应该像你所期望的那样工作。

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

谢谢

快速总结:

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

Page view是我目前正在做的。在页面视图中有两个组件，网站的实时视图(无论他们想要的页面)和底部的叠加菜单。就像youtube页面底部的播放列表一样。问题是，为了把这个网站的实时渲染在框架中，你有一个iframe内的iframe，我正试图解决这个问题。

但与其把它当作一个bug，我正在寻找替代方法来实现上述

我在pastebin上的最终解决方案:页面视图:http://paste.ubuntu.com/648246/

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

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

这是一个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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=firebox&amp;aq=&amp;sll=53.800651,-4.064941&amp;sspn=17.72791,44.736328&amp;ie=UTF8&amp;hq=firebox&amp;hnear=&amp;z=5&amp;iwloc=A&amp;cid=2836054255231781537&amp;ll=51.386465,-0.138487&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=firebox&amp;aq=&amp;sll=53.800651,-4.064941&amp;sspn=17.72791,44.736328&amp;ie=UTF8&amp;hq=firebox&amp;hnear=&amp;z=5&amp;iwloc=A&amp;cid=2836054255231781537&amp;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调用内容到#holderdiv的选项，而不是使用iFrame太

相关文章：