Creación de una superposición de sitio similar a "Google Analytics"

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

Pregunta

Estoy tratando de crear un sitio que utilice tecnología similar a la de la superposición de sitios de Google Analytics, pero enmarcaré mi propio sitio. Más tarde, puedo decidir cambiar el tipo de superposición (o eliminarla por completo), por lo que usar la superposición en lugar de modificar directamente las páginas de origen es la única opción que estoy considerando. Por ahora, también estoy probando una barra estática ubicada en la parte superior (como la que también usa Google Analytics), que usará un iframe a continuación para servir la página de origen.

Aquí está el código: 

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

Sin embargo, el principal problema que tengo es que en mi sitio web objetivo (búsqueda de Google en este caso de prueba), cuando las páginas se desplazan más tiempo que el área de la pantalla visible, a medida que me desplazo hacia abajo, el texto superpuesto permanece estático en su lugar. ¿Hay alguna forma de cambiar el CSS para que el texto superpuesto permanezca junto a lo que quiero que se superponga en el sitio de destino? En el caso de los resultados de búsqueda de Google, por ejemplo, si tuviera que superponer texto junto al logotipo de Google, el texto superpuesto siempre permanecería junto al logotipo de Google, de modo que cuando me desplazaba lo suficiente como para que el logotipo ya no estuviera a la vista , el texto superpuesto ya no estaba a la vista. Esto funciona igual que Google Analytics, ya que quiero que el texto superpuesto se ancle directamente al texto que se superpone.

Avíseme si puedo responder cualquier pregunta sobre cómo me gustaría que funcione.

¡Gracias!

¿Fue útil?

Solución

Debido a restricciones de seguridad del navegador, no creo que pueda editar el contenido de un iframe desde fuera de ese iframe. Tendría que hacer el diseño desde el iframe con css o javascript.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top