創建一個「Google Analytics」就像網站覆蓋圖

我想創建一個使用類似Google Analytics網站覆蓋圖技術的網站，但會構建自己的網站。我可能稍後決定改變覆蓋類型（或完全消除它），因此使用覆蓋而不是直接修改源頁面是我正在考慮的唯一選項。現在，我還在測試位於頂部的靜態欄（例如Google Analytics使用的），該靜態欄將使用以下iframe來提供源頁面。創建一個「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>

不過，我的主要問題是，我的目標網站（在本次測試的情況下谷歌搜索），當頁面滾動比可視屏幕面積再像我向下滾動，覆蓋文字保持靜止。無論如何改變CSS，以便覆蓋文字保持放在我想要它覆蓋在目標網站上的東西旁邊嗎？以Google搜索結果爲例，如果我要在Google徽標旁邊疊加文字，疊加文字將始終保留在Google徽標旁邊，以便當我向下滾動足夠遠以使徽標不再位於視圖中時，覆蓋文字也不再可見。這與Google Analytics的工作原理相同，我希望疊加文本可以直接定位到疊加的文本。

請讓我知道，如果我可以回答任何關於我如何工作的問題。

謝謝！

來源

2009-09-18 kazzamalla

由於瀏覽器安全限制，我不認爲你可以從iframe外部編輯iframe的內容。你將不得不在iframe中用css或javascript來完成樣式。

來源

2009-09-20 08:40:30 PHLAK

創建一個「Google Analytics」就像網站覆蓋圖

回答

相關問題