开发者

Best practice for injecting a header or toolbar into a page?

开发者 https://www.devze.com 2023-02-10 16:51 出处:网络
Our webapp allows customers to view historical snapshots of pages on their site. We want to inject a header into the top of the page (something like the digg or linkedin toolbar) that contains data li

Our webapp allows customers to view historical snapshots of pages on their site. We want to inject a header into the top of the page (something like the digg or linkedin toolbar) that contains data like snapshot time, url, and various other metrics.

We want to present these pages as close as possible to their original state.

So what is the best way to add a header into a page whilst preserving it as best possible?

Potential approaches we have looked at:

  • Sticking the cached page in an iframe. However a surprising number of sites contain frame-breaking code and we don't want to do anything hacky like trying to stop this.

  • Add an absolutely/fixed positioned div to t开发者_StackOverflow中文版he top of the page with a high z-index. The problem with this approach is that a) some of your styling may get over-written, b) javascript that runs on DOM load can screw around with your html/ccs (e.g Plone-powered sites add classes and styles to all tables for example) c) the varying DOCTYPEs or lack-of can screw up our css (yes IE, looking at you).

  • Adding an absolutely positioned iframe to the top of the page with a high z-index. This get around any of our html/css being clobbered or amended. However again we have DOCTYPE issues - we'd like it statically positioned and IE7 doesn't support this in Quirksmode.

Any thoughts? Thanks


Why would you want to use a banner with a height of 100px? I see some other possibilities:

  1. Can't you use a link to a popup or page with more information?
  2. Or make it pull out if you hover it.

That way it will not obscure a large percentage of the site.


If you control the links that lead to an archived version, you could put in a proxy-url. Let that URL open the right html in a frame. This is much like google cache:

  1. show a list of links that look like pagearchive.html?version=43234324
  2. let pagearchive.html be a html page with an iframe that starts 100px from the top. the version=43234324 part can let you open the right url in the frame.
0

精彩评论

暂无评论...
验证码 换一张
取 消