1

我正在尝试创建一个使用与 Google Analytics Site Overlay 类似的技术的网站，但将构建我自己的网站。我以后可能会决定更改覆盖的类型（或完全消除它），因此使用覆盖而不是直接修改源页面是我正在考虑的唯一选择。目前，我还在测试位于顶部的静态栏（例如 Google Analytics 也使用），它将使用下面的 iframe 来提供源页面。

这是代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Test Overlay</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
    margin: 0;
    padding: 40px 0 0 0;
    overflow: hidden;
    font: 83%/1.4 Arial, Helvetica, Sans-Serif;
}
#bar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    min-width: 900px;
    height: 30px;
    padding: 5px 0;
    line-height: 1;
    background: #333;
    color: #fff;
    text-size: 1.2em;
}
#bar a {
    padding: 0 5px;
    color: #fff;
}
#frame {
    width: 100%;
    height: 100%;
    z-index: 10;
}
#overlay_example
{
    position: absolute;
    left: 275px;
    top: 275px;
    font-size: 14px;
}
</style>
</head>
<body>
<div id="content">
    <div id="bar">
        <a href="http://mytestsite.com" title="overlay example">Test Site</a>
    </div>
    <div>
        <iframe scrolling="auto" id="frame" src="http://www.google.com/search?hl=en&q=CSS+iframe+overlay" frameborder="0" ></iframe>
    </div>

    <div id="overlay_example">* Overlay Data *</div>
</div>
</body>
</html>

但是，我遇到的主要问题是，在我的目标网站（此测试用例中为 Google 搜索）上，当页面滚动的时间超过可视屏幕区域时，当我向下滚动时，覆盖文本保持静止不动。无论如何要更改 CSS 以使覆盖文本保持在我希望它覆盖在目标站点中的内容旁边？以 Google 搜索结果为例，如果我要在 Google 徽标旁边叠加文本，则叠加文本将始终保留在 Google 徽标旁边，因此当我向下滚动足够远以至于徽标不再出现时，覆盖文本也不再出现在视图中。这就像谷歌分析一样，我希望覆盖文本锚定在它覆盖的文本上。

如果我能回答任何关于我希望它如何工作的问题，请告诉我。

谢谢！

4

1 回答 1

2

由于浏览器安全限制，我认为您不能从 iframe 外部编辑 iframe 的内容。您必须使用 css 或 javascript 从 iframe 中进行样式设置。

于 2009-09-20T08:40:30.670 回答