0

How does images.google.com render its frames??

I have two servers, that have external web viewable content, and an internal search engine that only admins can use. The external content cannot be edited, it was created with some proprietary technology. What I want to do is allow my internal admins to see a bar that allows them to perform administrative functions on the external site (index) by appending an "admin bar" to the bottom of the page, much like images.google.com appends a frame to the beginning of websites.

Using this code below I have figured out how to do this if the two were on the same server, rendering the external site in a frame and dynamically sizing that frame with javascript, but I cannot figure out how to do this in my situation because the two sites are on different servers/domains (which cause a javascript permission error).

Quite a few people have implemented similar features (images.google, the diggbar, facebook's bar, etc.), so i know it's possible, I just can't get any info on how to approach the problem. Any help is greatly appreciated 

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

<body onload=”resizeFrame(document.getElementById(’childframe’))” bgcolor=”#cccccc”&gt;

<script type=”text/javascript”&gt;
// 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”&gt;
</iframe>
</p>

</body>
</html>
4

2 回答 2

2

View the source of 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-30T13:41:00.883 回答
0

This is kind of a rehash, but here goes:

  1. Create a table with 2 rows. one row is going to be your toolbar. Put all your content there.
  2. Create an iframe in the other row. The iframe should point to your external site.

so your <body> tag should have something like this:

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

the point of the toolbar being 1% is to have as small a footprint as possible. Otherwise, the toolbar gets the same amount as the iframe.

于 2009-08-07T15:16:06.440 回答