Comment afficher une barre similaire à images.google.com?

Comment images.google.com rend ses cadres ??Comment afficher une barre similaire à images.google.com?

J'ai deux serveurs, qui ont un contenu visible sur le Web externe, et un moteur de recherche interne que seuls les administrateurs peuvent utiliser. Le contenu externe ne peut pas être modifié, il a été créé avec une technologie propriétaire. Ce que je veux faire est de permettre à mes administrateurs internes de voir une barre qui leur permet d'effectuer des fonctions administratives sur le site externe (index) en ajoutant une "barre d'administration" au bas de la page, un peu comme images.google.com un cadre au début des sites Web. En utilisant ce code ci-dessous j'ai compris comment faire si les deux étaient sur le même serveur, en rendant le site externe dans un cadre et en dimensionnant dynamiquement cette image avec javascript, mais je ne peux pas comprendre comment faire cela dans ma situation car les deux sites sont sur des serveurs/domaines différents (ce qui provoque une erreur d'autorisation javascript).

Plusieurs personnes ont implémenté des fonctionnalités similaires (images.google, diggbar, barre facebook, etc.), donc je sais que c'est possible, je ne peux pas obtenir d'informations sur la façon d'aborder le problème. Toute aide est grandement appréciée

<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>

Source

2009-07-29 Schneems

J'ai besoin d'un lien cliquable. Et vous avez besoin d'un service de raccourcissement d'URL. –

Afficher la source de 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>

Source

2009-07-30 13:41:00

J'ai vérifié le code source sur les pages de liaison, mais pas sur la page elle-même, tout ce que vous avez à faire pour voir comment cela fonctionne est de remplacer le SRC en bas dans l'iframe avec votre propre page web, et voir comment fonctionne, j'ai essayé de vous voter mais apparemment je n'ai pas assez de réputation. – Schneems

Ce genre est d'une nouvelle mouture, mais voilà:

Créer une table avec 2 lignes. une ligne va être votre barre d'outils. Mettez tout votre contenu là-bas.
Créez un cadre iFrame dans l'autre ligne. L'iframe doit pointer vers votre site externe.

afin que votre corps < > balise doit avoir quelque chose comme ceci:

<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>

point de la barre d'outils étant de 1% est d'avoir la plus petite empreinte possible. Sinon, la barre d'outils obtient la même quantité que l'iframe.

Source

2009-08-07 15:16:06 SEK

Comment afficher une barre similaire à images.google.com?

Répondre

Questions connexes