Fatal编程技术网
  • javascript/
  • Javascript 如何渲染类似images.google.com的条形图？

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

javascript html iframe

Javascript 如何渲染类似images.google.com的条形图？,javascript,html,iframe,external,navigationcontroller,Javascript,Html,Iframe,External,Navigationcontroller,如何渲染其帧 我有两台服务器，它们有外部的web可视内容，还有一个只有管理员才能使用的内部搜索引擎。外部内容无法编辑，它是使用某些专有技术创建的。我想做的是让我的内部管理员看到一个栏，允许他们通过在页面底部附加一个“管理栏”在外部网站（索引）上执行管理功能，就像images.google.com在网站的开头附加一个框架一样 使用下面的代码，我已经知道如果这两个站点在同一台服务器上，如何实现这一点，在一个框架中呈现外部站点并使用javascript动态调整该框架的大小，但我无法知道在我的情况下如何

如何渲染其帧

我有两台服务器，它们有外部的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> 


父帧
//Firefox运行良好。由于框架边框的原因，Internet Explorer显示滚动条
函数大小调整框架（f）{
f、 style.height=f.contentWindow.document.body.scrollHeight+“px”；
}
父帧

父帧

父帧

父帧
查看谷歌的源代码

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


谷歌图像结果http://people.mozilla.com/~cbeard/labs/images/test-pilot.png
html
{
身高：100%；
}
身体
{
保证金：0；
字体：62.5%arial，无衬线；
身高：100%；
溢出：隐藏；
}
a、 a:参观了
{
颜色：#00c；
}
div
{
字体大小：130%；
}
#细节
{
浮动：左；
边缘顶部：10px；
}
#详情p
{
填充：0；
边际：0.02倍；
}
img
{
边界：无；
}
#外分离器
{
明确：两者皆有；
宽度：100%；
边框底部：2个实心#404040；
边框顶部：1px实心#A0；
利润率：10px0；
填充：0；
字号：1px；
溢出：隐藏；
}
#分离器
{
背景：#eaeaea；
高度：3倍；
}
桌子
{
字体大小：100%；
}




360 x 327-110k-巴布亚新几内亚-
people.mozilla.com//
图片/test-pilot.png


图像可能受版权保护。


下图为：


var a=document.getElementById（'rf'）；a&&a.contentWindow&&a.contentWindow.focus（）；
这是一种重复，但这里是：

  • 创建一个包含两行的表。一行将成为您的工具栏。把你所有的内容都放在那里
  • 在另一行中创建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相同的数量。

    我需要一个可单击的链接。你需要一个URL缩短服务。我查看了链接页面上的源代码，但没有查看页面本身，你所要做的就是用你自己的网页替换iframe底部的SRC，看看它是如何工作的，我试着投票支持你，但显然我没有足够的声誉。