1

Google アナリティクスのサイト オーバーレイと同様の技術を使用するサイトを作成しようとしていますが、自分のサイトをフレーミングします。後でオーバーレイの種類を変更する (または完全に削除する) ことを決定する可能性があるため、ソース ページを直接変更する代わりにオーバーレイを使用することが、私が検討している唯一のオプションです。今のところ、上部に配置された静的バーもテストしています (Google アナリティクスも同様に使用します)。これは、下の 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>

ただし、私が抱えている主な問題は、ターゲット Web サイト (このテスト ケースでは Google 検索) で、ページが表示可能な画面領域よりも長くスクロールすると、下にスクロールしてもオーバーレイ テキストが静止したままになることです。とにかく CSS を変更して、オーバーレイ テキストがターゲット サイトでオーバーレイしたいものの横に配置されるようにする方法はありますか? たとえば、Google の検索結果の場合、Google ロゴの横にテキストをオーバーレイすると、オーバーレイ テキストは常に Google ロゴの横に残るため、下にスクロールしてロゴが表示されなくなると、 、オーバーレイ テキストも表示されなくなりました。これは、オーバーレイ テキストをオーバーレイ テキストに固定するという点で、Google アナリティクスと同じように機能します。

どのように機能させたいかについての質問に答えられるかどうか教えてください。

ありがとう！

4

1 に答える 1

2

ブラウザのセキュリティ制限により、iframe の外部から iframe の内容を編集することはできないと思います。cssまたはjavascriptを使用して、iframe内からスタイリングを行う必要があります。

于 2009-09-20T08:40:30.670 に答える