Erstellen eines „Google Analytics“ Wie Website-Overlay

StackOverflow https://stackoverflow.com/questions/1445462

Frage

Ich versuche, eine Website zu erstellen, die zu dem von Google Analytics Website-Overlay-ähnlicher Technologie verwendet, werde aber meine eigene Website wird einrahmen. Ich kann später entscheiden, die Art der Überlagerung zu ändern (oder ganz beseitigen), so Overlay verwenden, anstatt direkt die Quellseiten modifiziert ist die einzige Option, die ich überlege. Vorerst teste ich auch eine statische Leiste am oberen Rand positioniert (wie Google Analytics verwendet als auch), die im Folgenden ein iframe verwenden, um die Quellseite zu dienen.

Hier ist der Code: 

<!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>

Allerdings ist das Hauptproblem, ich habe das auf meiner Ziel-Website (in diesem Testfall Google-Suche), wenn die Seiten blättern länger als der sichtbare Bildschirmbereich, wie ich nach unten scrollen, der Overlay-Text anstelle statisch bleibt. Gibt es trotzdem, die CSS zu ändern, so dass der Overlay-Text zum nächsten gestellt bleibt, was ich will es in der Zielstelle zu überlagern? Im Fall von Google-Suchergebnissen zum Beispiel, wenn ich Text neben das Google-Logo zu überlagern, so würde das Überlagerungstext bleibt immer neben das Google-Logo, so dass, wenn ich nach unten weit gescrollt genug, dass das Logo nicht mehr in Sicht Text, die Overlay war auch nicht mehr in Sicht. Dies funktioniert genauso wie Google Analytics, dass ich der Overlay Text möge sich an den Text zu verankern überlagert.

Bitte lassen Sie mich wissen, wenn ich Fragen beantworten, wie Ich mag würde es arbeiten.

Danke!

War es hilfreich?

Lösung

Aufgrund Browser Sicherheitseinschränkungen glaube ich nicht, dass Sie die Inhalte eines iframe von außerhalb dieses iframe bearbeiten können. Sie würden dabei das Styling aus dem iframe mit CSS oder Javascript werden müssen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top