如何呈現與images.google.com類似的欄？

images.google.com如何渲染其幀？如何呈現與images.google.com類似的欄？

我有兩臺服務器，它們具有外部網頁可查看內容以及一個只有管理員才能使用的內部搜索引擎。外部內容無法編輯，它是使用某種專有技術創建的。我想要做的是讓我的內部管理員通過在頁面底部附加一個「管理欄」來查看允許他們在外部網站（索引）上執行管理功能的欄，與images.google.com附加內容非常相似一個框架到網站的開始。

使用下面的代碼我已經想出瞭如何做到這一點，如果兩個在同一臺服務器上，呈現在一個框架中的外部網站，並動態調整大小與JavaScript框架，但我不知道如何做到這一點我的情況是因爲這兩個站點位於不同的服務器/域（這會導致javascript權限錯誤）。

不少人已經實現了類似的功能（images.google，diggbar，facebook的酒吧等），所以我知道這是可能的，我不能得到任何有關如何解決問題的信息。任何幫助非常感謝

<html> 
<head> <title>Parent frame</title> </head> 

<body onload=」resizeFrame(document.getElementById(’childframe’))」 bgcolor=」#cccccc」> 

<script type=」text/javascript」> 
// Firefox worked fine. Internet Explorer shows scrollbar because of frameborder 
function resizeFrame(f) { 
f.style.height = f.contentWindow.document.body.scrollHeight + 「px」; 
} 
</script> 

<p>Parent frame.</p> 
<p>Parent frame.</p> 
<p>Parent frame.</p> 
<p>Parent frame.</p> 

<p> 
<iframe frameborder=0 border=0 src=」./child-frame.html」 name=」childframe」 id=」childframe」> 
</iframe> 
</p> 

</body> 
</html>

來源

2009-07-29 Schneems

我需要一個可點擊的鏈接。你需要一個URL縮短服務。 – 2009-07-30 13:34:16

查看谷歌的來源！

<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title> Google Image Result for http://people.mozilla.com/~cbeard/labs/images/test-pilot.png 
    </title> 
    <style> 
    html 
    { 
     height: 100%; 
    } 
    body 
    { 
     margin: 0; 
     font: 62.5% arial, sans-serif; 
     height: 100%; 
     overflow: hidden; 
    } 
    a, a:visited 
    { 
     color: #00c; 
    } 
    div 
    { 
     font-size: 130%; 
    } 
    #details 
    { 
     float: left; 
     margin-top: 10px; 
    } 
    #details p 
    { 
     padding: 0; 
     margin: 0 0 2px; 
    } 
    img 
    { 
     border: none; 
    } 
    #outer-separator 
    { 
     clear: both; 
     width: 100%; 
     border-bottom: 2px solid #404040; 
     border-top: 1px solid #a0a0a0; 
     margin: 10px 0 0; 
     padding: 0; 
     font-size: 1px; 
     overflow: hidden; 
    } 
    #separator 
    { 
     background: #eaeaea; 
     height: 3px; 
    } 
    table 
    { 
     font-size: 100%; 
    } 
    </style> 
    </head> 
    <body> 
    <table cellpadding=0 cellspacing=0 height="100%" width="100%"> 
     <tr height="1%"> 
     <td style="top:0;width:100%"> 
      <div class=std style="background:#ebeff9;padding:6px 8px"> 
      <a href="http://images.google.com/imghp?hl=en"> 
       <img src=/images/isr_g.png style="padding:0;margin:0;vertical-align:middle;border:0" title="Go to Google Images Home" alt="Go to Google Images Home" width=72 height=24> 
      </a> 
      <form style="display:inline" method=GET action="/images"> 
       <input type=hidden name=gbv value="2"> 
       <input type=hidden name=hl value="en"> 
       <input type=hidden name=sa value="3">&nbsp; 
       <input type=text name=q size=41 maxlength=2048 value="test" title="Search images">&nbsp; 
       <input type=submit name="btnG" style="margin:0 2px 0 5px" value="Search images"> 
      </form>&nbsp; 
      <a id=b2r href="/images?q=test&amp;gbv=2&amp;hl=en" onclick="if(history.length>1){history.back();return false}return true;" style="vertical-align:40%">Back to image results 
      </a> 
      </div> 
      <table cellpadding=0 cellspacing=0 width="100%"> 
      <tr> 
       <td> 
       <a href="http://people.mozilla.com/~cbeard/labs/images/test-pilot.png" id=thumbnail> 
        <img src="http://tbn0.google.com/images?q=tbn:KLm4Rocmahp8wM:http://people.mozilla.com/~cbeard/labs/images/test-pilot.png" width=88 height=80 style="float:left;margin:10px 10px 0;border:1px solid" alt="See full size image"> 
       </a> 
       <div id=details> 
        <p style="margin-bottom:4px"> 
        <a href="http://people.mozilla.com/~cbeard/labs/images/test-pilot.png" style="font-size:115%;font-weight:bold">See full size image 
        </a> 
        </p> 
        <p>360 x 327 - 110k - png - 
        <span style="color:green">people.mozilla.com/.../ 
         <wbr>images/test-pilot.png 
        </span> 
        </p> 
        <p>Image may be subject to copyright. 
        </p> 
        <p>Below is the image at: 
        <a href="http://labs.mozilla.com/tag/testpilot/">labs.mozilla.com/ 
         <wbr>tag/testpilot/ 
        </a> 
        </p> 
       </div> 
       <td align=right valign=bottom> 
       <div style="padding-right:8px"> 
        <a href="http://labs.mozilla.com/tag/testpilot/" style="text-decoration:none"> 
        <u>Remove frame 
        </u>&nbsp; 
        <img src=/images/isr_c.gif style="margin-bottom:-2px" height=15 width=15 alt=""> 
        </a> 
       </div> 
      </table> 
      <div id=outer-separator> 
      <div id=separator> 
      </div> 
      </div> 
     <tr> 
     <td> 
      <iframe scrolling=auto id=rf src="http://labs.mozilla.com/tag/testpilot/" frameborder=0 allowtransparency=true style="width:100%;height:100%"> 
      </iframe> 
    </table> 
    </body> 
<script>var a = document.getElementById('rf');a && a.contentWindow && a.contentWindow.focus();</script> 
</html>

來源

2009-07-30 13:41:00

我檢查了鏈接頁面上的源代碼，但沒有在頁面上顯示它的自我，只需使用自己的網頁替換iframe底部的SRC，然後查看它是如何工作的作品，我試圖給你投票，但顯然我沒有足夠的聲譽。 – Schneems 2009-07-30 16:34:42

這是怎樣的一個翻版，但這裏有雲：

2行創建一個表。一行將成爲你的工具欄。把你所有的內容放在那裏。
在另一行中創建一個iframe。 iframe應指向您的外部網站。

讓你的身體<標籤>應該有這樣的事情：

<table height="100%" width="100%"> 
<tr height="1%"><td>Toolbar of some sort</td></tr> 
<tr><td> 
    <iframe scrolling=auto id=rf src="http://server/page" 
    frameborder=0 allowtransparency=true style="width:100%;height:100%"> 
</td></tr> 
</table>

工具欄中爲1％的一點是要有儘可能小的足跡可能。否則，工具欄會獲得與iframe相同的數量。

來源

2009-08-07 15:16:06 SEK

如何呈現與images.google.com類似的欄？

回答

相關問題