사이트 오버레이와 같은 "Google 웹 로그 분석"을 만듭니다

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

문제

Google 웹 로그 분석 사이트 오버레이와 유사한 기술을 사용하는 사이트를 만들려고하지만 내 사이트를 프레임 할 것입니다. 나중에 오버레이 유형을 변경하거나 완전히 제거하기로 결정할 수도 있으므로 소스 페이지를 직접 수정하는 대신 오버레이를 사용하는 것이 고려해야 할 유일한 옵션입니다. 현재로서는 맨 위에 위치한 정적 막대 (예 : Google Analytics 사용)를 테스트하여 아래의 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>

그러나 제가 가진 주요 문제는 내 대상 웹 사이트 (이 테스트 케이스의 Google 검색)에서 페이지가 보이는 화면 영역보다 더 오래 스크롤 할 때 아래로 스크롤하면 오버레이 텍스트가 정적으로 유지된다는 것입니다. 어쨌든 CSS를 변경하여 오버레이 텍스트가 대상 사이트에서 오버레이를 오버레이하기를 원하는 옆에 놓일 수 있도록해야합니까? 예를 들어 Google 검색 결과의 경우 Google 로고 옆에 텍스트를 오버레이 해야하는 경우 오버레이 텍스트는 항상 Google 로고 옆에 남아 있으므로 로고가 더 이상보기에 충분히 스크롤 될 때 , 오버레이 텍스트도 더 이상 볼 수 없었습니다. 이것은 오버레이 텍스트가 텍스트 오버레이에 오른쪽으로 정박하기를 원한다는 점에서 Google 웹 로그 분석과 마찬가지로 작동합니다.

내가 어떻게 작동하는지에 대한 질문에 답할 수 있는지 알려주십시오.

감사!

도움이 되었습니까?

해결책

브라우저 보안 제한으로 인해 Iframe 외부에서 iframe의 내용을 편집 할 수는 없다고 생각합니다. CSS 또는 JavaScript를 사용하여 iframe 내에서 스타일링을해야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top