Как сделать панель, похожую на 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-адресов. –

Просмотрите источник Google!

<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

Я проверил исходный код на страницах ссылок, но не на странице сам, все, что вам нужно сделать, чтобы посмотреть, как это работает, - это заменить SRC внизу в iframe вашей собственной веб-страницей и посмотреть, как это сделать работы, я пытался проголосовать за вас, но, видимо, у меня недостаточно репутации. – Schneems

Это своего рода перепев, но здесь идет:

Создать таблицу с 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?

ответ

Смежные вопросы