كيف أقوم بعمل شريط مشابه لـ Images.Google.com؟
https://stackoverflow.com/questions/1202870
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
كيف Images.Google.com تقديم إطاراتها ؟؟
لديّ خادمان ، لهما محتوى خارجي يمكن عرضه على الويب ، ومحرك بحث داخلي يمكن للمسؤولين استخدامه فقط. لا يمكن تحرير المحتوى الخارجي ، تم إنشاؤه مع بعض التكنولوجيا الملكية. ما أريد القيام به هو السماح لمشرفي الداخليين برؤية شريط يسمح لهم بأداء وظائف إدارية على الموقع الخارجي (الفهرس) عن طريق إلحاق "شريط المسؤول" إلى أسفل الصفحة ، مثل الصور. google.com إطار لبداية المواقع.
باستخدام هذا الرمز أدناه ، اكتشفت كيفية القيام بذلك إذا كان الاثنان على نفس الخادم ، مما يجعل الموقع الخارجي في إطار وتغيير حجم هذا الإطار ديناميكيًا مع JavaScript ، لكن لا يمكنني معرفة كيفية القيام بذلك في وضعي لأن يوجد موقعان على خوادم/مجالات مختلفة (والتي تسبب خطأ في إذن JavaScript).
قام عدد غير قليل من الأشخاص بتطبيق ميزات مماثلة (صور. Google ، The DiggBar ، Bar's 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>
نصائح أخرى
هذا نوع من إعادة صياغة ، ولكن هنا يذهب:
- إنشاء جدول مع 2 صفوف. صف واحد سيكون شريط الأدوات الخاص بك. ضع كل المحتوى الخاص بك هناك.
- إنشاء iframe في الصف الآخر. يجب أن يشير Iframe إلى موقعك الخارجي.
بحيثu003Cbody style=";text-align:right;direction:rtl"> يجب أن تحتوي العلامة على شيء مثل هذا:
<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.
