将标题或工具栏注入页面的最佳实践？答案

【问题标题】：Best practice for injecting a header or toolbar into a page?将标题或工具栏注入页面的最佳实践？
【发布时间】：2011-06-26 05:27:34
【问题描述】：

我们的网络应用程序允许客户查看其网站上页面的历史快照。我们希望在页面顶部（类似于 digg 或linkedin 工具栏）注入一个标题，其中包含快照时间、url 和各种其他指标等数据。

我们希望这些页面尽可能接近其原始状态。

那么在页面中添加页眉同时尽可能保留它的最佳方法是什么？

我们研究过的潜在方法：

将缓存页面粘贴在 iframe 中。然而，数量惊人的网站包含破帧代码，我们不想做任何像试图阻止这种情况一样的骇人听闻的事情。
将绝对/固定定位的 div 添加到具有高 z-index 的页面顶部。这种方法的问题是 a) 您的某些样式可能会被覆盖，b) 在 DOM 负载上运行的 javascript 可能会与您的 html/ccs 混在一起（例如，Plone 支持的站点会向所有表添加类和样式） ) c) 不同的 DOCTYPE 或缺少可能会搞砸我们的 css（是的 IE，看着你）。
将绝对定位的 iframe 添加到具有高 z-index 的页面顶部。这可以绕过我们的任何 html/css 被破坏或修改。然而，我们又遇到了 DOCTYPE 问题 - 我们希望它静态定位，而 IE7 在 Quirksmode 中不支持这一点。

有什么想法吗？谢谢

【问题讨论】：

【解决方案1】：

为什么要使用高度为 100 像素的横幅？我看到了其他一些可能性：

这样它就不会遮挡大部分网站。

【讨论】：

【解决方案2】：

如果您控制指向存档版本的链接，则可以输入代理 URL。让该 URL 在框架中打开正确的 html。这很像谷歌缓存：

显示类似于 pagearchive.html?version=43234324 的链接列表
让 pagearchive.html 成为一个 html 页面，其 iframe 从顶部开始 100 像素。 version=43234324 部分可以让您在框架中打开正确的 url。

【讨论】：

不确定我是否理解 - 这对出现框架中断的网站有何帮助？
使用 Frames 的一个问题是人们可以使用“framebusters”。您当然可以从源页面中删除所有 JS（从而禁用 framebuster），但如果您希望将源页面呈现为接近原始页面，则删除源 JS 可能不是一种选择。