Création d'un & # 8220; Google Analytics & # 8221; J'aime superposition de site

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

Question

J'essaie de créer un site utilisant une technologie similaire à celle de Google Analytics Site Overlay, mais cadrant mon propre site. Il se peut que je décide plus tard de changer le type de surimpression (ou de l'éliminer entièrement), aussi utiliser la superposition au lieu de modifier directement les pages source est la seule option que je considère. Pour le moment, je teste également une barre statique placée en haut (telle que celle utilisée par Google Analytics), qui utilisera un iframe ci-dessous pour servir la page source.

Voici le 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>

Cependant, le principal problème que je rencontre est que sur mon site Web cible (recherche Google dans ce cas de test), lorsque les pages défilent plus longtemps que la zone d'affichage, lorsque je fais défiler l'écran vers le bas, le texte de surimpression reste statique. Y a-t-il un moyen de changer le CSS pour que le texte de superposition reste placé à côté de ce que je souhaite superposer dans le site cible? Dans le cas des résultats de recherche Google, par exemple, si je superposais du texte à côté du logo Google, le texte superposé resterait toujours à côté du logo Google. Ainsi, lorsque je ferais défiler l'écran suffisamment loin, le logo n'était plus visible. , le texte en superposition n’était plus visible non plus. Cela fonctionne comme Google Analytics dans le sens où je souhaite que le texte de surimpression s’ancre correctement dans le texte qu’il recouvre.

Faites-moi savoir si je peux répondre à vos questions sur la manière dont j'aimerais que cela fonctionne.

Merci!

Était-ce utile?

La solution

En raison des restrictions de sécurité du navigateur, je ne pense pas que vous puissiez éditer le contenu d'un iframe de l'extérieur. Vous devez créer le style depuis l’iframe avec css ou javascript.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top