Wie rendere ich eine Bar ähnlich wie imby.google.com?

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

Frage

Wie geht es Bilder.google.com seine Rahmen rendern?

Ich habe zwei Server, die externe, webbeinhaltbare Inhalte haben, und eine interne Suchmaschine, die nur Administratoren verwenden können. Der externe Inhalt kann nicht bearbeitet werden, er wurde mit einer proprietären Technologie erstellt. Was ich tun möchte, ist, meinen internen Administratoren eine Balken anzusehen, mit der sie administrative Funktionen auf der externen Website (Index) ausführen können, indem sie eine "Admin -Balken" am Ende der Seite anhängen, ähnlich wie Bilder.google.com appells Ein Rahmen zum Beginn von Websites.

Mit diesem Code unten habe ich festgestellt Zwei Sites befinden sich auf verschiedenen Servern/Domänen (die einen JavaScript -Erlaubnisfehler verursachen).

Nicht wenige Leute haben ähnliche Funktionen implementiert (Images.Google, The Diggbar, Facebooks Bar usw.). Ich weiß, dass es möglich ist, ich kann einfach keine Informationen darüber erhalten, wie man sich dem Problem annimmt. Jede Hilfe wird sehr geschätzt 

<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>
War es hilfreich?

Lösung

Sehen Sie sich die Quelle von Google an!

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

Andere Tipps

Dies ist eine Art Wiederholung, aber hier geht:

  1. Erstellen Sie eine Tabelle mit 2 Zeilen. Eine Reihe wird Ihre Symbolleiste sein. Setzen Sie dort alle Ihre Inhalte ein.
  2. Erstellen Sie in der anderen Zeile einen Iframe. Der Iframe sollte auf Ihre externe Site verweisen.

also deinu003Cbody> Tag sollte so etwas haben:

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

Der Punkt der Symbolleiste ist 1%, so klein wie möglich. Andernfalls erhält die Symbolleiste den gleichen Betrag wie der Iframe.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top