Как сделать панель похожую на images.google.com?
-
05-07-2019 - |
Вопрос
Как images.google.com отображает свои фреймы ?? Р>
У меня есть два сервера с внешним содержимым, доступным для просмотра в Интернете, и внутренняя поисковая система, которую могут использовать только администраторы. Внешний контент не может быть отредактирован, он был создан по какой-то запатентованной технологии. Я хочу, чтобы мои внутренние администраторы увидели панель, позволяющую им выполнять административные функции на внешнем сайте (индекс), добавив & Quot; админ-панель & Quot; в нижней части страницы, так же как и images.google.com добавляет рамку к началу веб-сайтов.
Используя этот код ниже, я выяснил, как это сделать, если они были на одном сервере, рендеринг внешнего сайта во фрейме и динамическое определение размера этого фрейма с помощью JavaScript, но я не могу понять, как это сделать в моем ситуация, потому что два сайта находятся на разных серверах / доменах (которые вызывают ошибку разрешения JavaScript).
Несколько человек реализовали подобные функции (images.google, diggbar, панель Facebook и т. д.), поэтому я знаю, что это возможно, но я просто не могу получить никакой информации о том, как решить эту проблему. Любая помощь очень ценится
<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>
Решение
Просмотр источника в 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>
Другие советы
Это что-то вроде перефразировки, но здесь идет речь:
<Ол>Итак, ваш < body > тег должен иметь что-то вроде этого:
<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%, должна иметь как можно меньшую площадь. В противном случае панель инструментов получает столько же, сколько и фрейм.