¿Cómo renderizo una barra similar a images.google.com?
https://stackoverflow.com/questions/1202870
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Cómo images.google.com renderiza sus marcos?
Tengo dos servidores que tienen contenido externo visible en la web y un motor de búsqueda interno que solo los administradores pueden usar. El contenido externo no se puede editar, se creó con alguna tecnología patentada. Lo que quiero hacer es permitir que mis administradores internos vean una barra que les permita realizar funciones administrativas en el sitio externo (índice) agregando una & Quot; barra de administración & Quot; en la parte inferior de la página, al igual que images.google.com agrega un marco al comienzo de los sitios web.
Usando este código a continuación, he descubierto cómo hacer esto si los dos estaban en el mismo servidor, representando el sitio externo en un marco y dimensionando dinámicamente ese marco con javascript, pero no puedo entender cómo hacerlo en mi situación porque los dos sitios están en servidores / dominios diferentes (lo que causa un error de permiso de JavaScript).
Algunas personas han implementado características similares (images.google, diggbar, barra de facebook, etc.), así que sé que es posible, simplemente no puedo obtener ninguna información sobre cómo abordar el problema. Cualquier ayuda es muy apreciada
<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>
Solución
¡Vea la fuente 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">
<input type=text name=q size=41 maxlength=2048 value="test" title="Search images">
<input type=submit name="btnG" style="margin:0 2px 0 5px" value="Search images">
</form>
<a id=b2r href="/images?q=test&gbv=2&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>
<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>
Otros consejos
Esto es una especie de repetición, pero aquí va:
- Crear una tabla con 2 filas. una fila será tu barra de herramientas. Ponga todo su contenido allí.
- Cree un iframe en la otra fila. El iframe debe apuntar a su sitio externo.
entonces tu < body > la etiqueta debería tener algo como esto:
<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>
el punto de que la barra de herramientas sea 1% es tener una huella tan pequeña como sea posible. De lo contrario, la barra de herramientas obtiene la misma cantidad que el iframe.
