كيف يمكنني تعيين عرض مخصص على iframe الخاص ببحث Google؟

Question

أحاول استخدام بحث جوجل لموقعي:

http://www.houseofhawkins.com/search.php

لا يعمل بشكل جيد مع بعض دقة الشاشة.إليك الكود المقدم من جوجل:

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 250;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

لقد قمت بتغيير "googleSearchFrameWidth" إلى 250 معتقدًا أنه يجب تعيين العرض بالبكسل (كان 600 في البداية).ولكن مع الشاشات الأصغر حجمًا (1024 * 768)، فإنها تبرز بجانب عناصر div الخاصة بي.

هل أفعل شيئًا غبيًا؟

Answer 1

وران في نفس المشكلة التي لم ترغب في تغيير حجم الإطار من. كنت أعتقد تغيير قيمة googleSearchFrameWidth سوف تفعل خدعة، ولكن كلا.

ولذا لجأت إلى التلاعب DOM. منذ اسم الإطار من هو "googleSearchFrame"، مباشرة بعد

<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

والمرجعية، وأضفت سمة <script> آخر بما يلي:

<script type="text/javascript">
  document.getElementsByName('googleSearchFrame').item(0).width = 600;
</script>

ما سبق يحدد عرض الإطار من في 600px. في قضيتك، من الواضح، وكنت ترغب في تعيين ل250. إذا كنت بجنون العظمة أن جوجل قد تغيير اسم الإطار من بعض يوم، واذهبوا مع أسلوب getElementsByTagName('iFrame') وتضييق عليه وصولا الى موقف الإطار من في المستند (إذا كان لديك إطارات iFrames متعددة).

Answer 2

لدي ثلاثة إعدادات يمكنك تعديلها، وآمل أن يوصلك مزيج منها إلى حيث تريد:

1. googleSearchFrameWidth - اضبط هذا في JavaScript على العرض المطلوب.هذا هو الأكثر وضوحًا والذي ربما قمت بتعديله بالفعل.
2. عرض قسم نتائج بحث CSE - استخدم عبارة النمط المضمنة (على سبيل المثال style ="width:500") لتعيين عرض div.
3. قم بتعيين نمط IFrame - إذا قمت بالتحقق، فمن المحتمل أن تلاحظ أن كل هذا المحتوى يتم عرضه من Google عبر IFrame.هذا أصعب قليلاً في التعديل ولكنه قابل للتنفيذ.للقيام بذلك، قم بإضافة عبارة إلى نهاية ورقة الأنماط الخاصة بك مثل #cse-search-results iframe { }, ، بما في ذلك نمط iframe الفعلي بين قوسين.

آمل أن يكون أحد هذه الأسئلة أو مجموعة منها هو الحل المناسب لك.عندما تكون في شك، استخدم مفتش DOM مثل المتوفر في Firebug لتحليل تأثير تغييراتك على DOM.أتمنى أن يساعدك هذا.

Answer 3

تحديث 22/06/10 - العثور على حل أبسط أدناه.غير ال فوريد القيمة في الكود ل فورد:11.لذلك يجب أن يبدو سطر واحد من التعليمات البرمجية مشابهًا لما يلي:

<input type="hidden" name="cof" value="FORID:11;NB:1" />

---

حاول الإضافة فقط

#cse-search-results iframe {width: 100%;}

في CSS الخاص بك.

Answer 4

خطوات سهلة لتعديل googleSearchFrameWidth في موقعك:

1. قم بتنزيل ملف "show_afs_search.js" الخاص بك من http://www.google.com/afsonline/show_afs_search.js وحفظه في نفس الدليل حيث توجد صفحة ويب results.htm.

2. افتح صفحة الويب الخاصة بالنتائج .htm وقم بتعديل رمز السطر في البرنامج النصي ...src="http://www.google.com/afsonline/show_afs_search.js" إلى:src = "show_afs_search.js"

3. افتح ملف "show_afs_search.js" الخاص بك وقم بتعديل عرض الإعداد: a إلى العرض: "600" (أو أي شيء تريد ضبط العرض بالبكسل) وحفظ ملف "show_afs_search.js" الخاص بك.

4. قم بتحميل كلا الملفين إلى موقع الاستضافة الخاص بك في نفس الدليل:results.htm وshow_afs_search.js'

منتهي!

Answer 5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("iframe[name='googleSearchFrame']").css("width","100%");
	});
</script>

Answer 6

سوف

وجوجل لن تسمح لك باستخدام عرض أصغر من 500px. أفضل رهان هو خلق نمط إطار iframe:

<style>
#cse-search-results iframe {width: 200px; }
</style>