Создание «Google Analytics», как наложение сайта - PullRequest
Новая
       10

Создание «Google Analytics», как наложение сайта

1 голос
/ 18 сентября 2009

Я пытаюсь создать сайт, который использует технологию, аналогичную технологии наложения сайта Google Analytics, но создаю свой собственный сайт. Позже я могу решить изменить тип наложения (или полностью его исключить), поэтому использование наложения вместо прямой модификации исходных страниц - это единственный вариант, который я рассматриваю. На данный момент я также тестирую статическую панель, расположенную вверху (например, в Google Analytics), в которой для показа исходной страницы будет использоваться нижеприведенный фрейм.

Вот код: 

<!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, поэтому при прокрутке вниз достаточно далеко, чтобы логотип больше не отображался текст наложения также больше не отображался. Это работает так же, как Google Analytics, так как я хочу, чтобы наложенный текст привязывался прямо к наложенному тексту.

Пожалуйста, дайте мне знать, если я смогу ответить на любые вопросы о том, как я хотел бы, чтобы это работало.

Спасибо!

1 Ответ

2 голосов
/ 20 сентября 2009

Из-за ограничений безопасности браузера я не думаю, что вы можете редактировать содержимое iframe извне этого iframe. Вы должны будете выполнять стилизацию внутри iframe с помощью CSS или JavaScript.

...