代码之家  ›  专栏  ›  技术社区  ›  teratorn

如何渲染类似images.google.com的条形图?

  •  0
  • teratorn  · 技术社区  · 6 年前

    images.google.com 渲染其帧??

    我有两台服务器,它们有外部的web可视内容,还有一个只有管理员才能使用的内部搜索引擎。外部内容无法编辑,它是使用某些专有技术创建的。我想做的是让我的内部管理员看到一个栏,允许他们通过在页面底部附加一个“管理栏”在外部网站(索引)上执行管理功能,就像images.google.com在网站的开头附加一个框架一样。

    使用下面的代码,我已经知道如果这两个站点在同一台服务器上,如何实现这一点,在一个框架中呈现外部站点并使用javascript动态调整该框架的大小,但我无法知道在我的情况下如何实现这一点,因为这两个站点位于不同的服务器/域上(这会导致javascript权限错误)。

    相当多的人已经实现了类似的功能(images.google、diggbar、facebook的bar等等),所以我知道这是可能的,我只是无法获得关于如何解决这个问题的任何信息。非常感谢您的帮助

    <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> 
    
    2 回复  |  直到 13 年前
        1
  •  2
  •   Josh Stodola    15 年前

    <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>
    
        2
  •  0
  •   SEK    15 年前

    这是一种重复,但这里有:

    1. 在另一行中创建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相同的数量。