Google Search iframe에서 사용자 정의 너비를 어떻게 설정할 수 있습니까?

StackOverflow https://stackoverflow.com/questions/297349

문제

내 사이트에 Google 검색을 사용하려고합니다.

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

화면 해상도로 잘 연주되지 않습니다. Google에서 제공 한 코드는 다음과 같습니다.

<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"를 PX에서 너비를 설정 해야하는 250 생각으로 변경했습니다. 그러나 작은 화면 (1024 * 768)으로 내 divs의 측면을 튀어 나옵니다.

내가 멍청한 짓을하고 있니?

도움이 되었습니까?

해결책

Iframe을 크기를 조정하고 싶었던 것과 같은 문제를 해결했습니다. 당신은 변화를 생각할 것입니다 googleSearchFrameWidth 가치는 트릭을 수행하지만 아니요.

그래서 나는 Dom Danipulation에 의지했습니다. iframe의 이름은 "이기 때문에"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>

위는 Iframe의 너비를 설정합니다 600px. 당신의 경우, 분명히 당신은 그것을 250. Google이 언젠가 iframe 이름을 변경할 수 있다는 편집증이라면 getElementsByTagName('iFrame') 방법과 문서에서 iframe 위치로 좁 힙니다 (여러 iframes가있는 경우).

다른 팁

나는 당신이 조정할 수있는 세 가지 설정이 있습니다. 그 조합은 당신이 가야 할 곳을 얻을 수 있기를 바랍니다.

  1. googlesearchframewidth - javaScript에서 원하는 너비로 설정하십시오. 이것은 가장 명백한 것이며 아마도 당신이 이미 조정했을 것입니다.
  2. CSE 검색 결과의 너비 Div - 인라인 스타일 문을 사용하십시오 (예 : style ="width:500") div의 너비를 설정합니다.
  3. iframe 스타일을 설정하십시오 - 확인하면이 모든 콘텐츠가 Iframe을 통해 Google에서 렌더링되고 있음을 알 수 있습니다. 이것은 조정하기가 조금 어렵지만 가능합니다. 이렇게하려면 스타일 시트 끝에 다음과 같은 문을 추가하십시오. #cse-search-results iframe { }, 괄호 안에있는 실제 iframe 스타일을 포함하여.

나는 이것들 중 하나 또는 이것들의 조합이 당신에게 답이되기를 바랍니다. 의심스러운 경우 FireBug에서 사용 가능한 DOM 검사관을 사용하여 DOM에 대한 변경 사항의 영향을 분석하십시오. 도움이 되었기를 바랍니다.

업데이트 22/06/10 - 아래에서 더 간단한 솔루션을 찾았습니다. 변경 포드 IN 코드의 가치 포드 : 11. 따라서 코드의 한 줄은 다음과 비슷해 보일 것입니다.

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

추가 해보십시오 

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

CSS에서.

쉽게 수정하는 쉬운 단계 googlesearchframewidth 귀하의 사이트에서 :

  1. 나만의 'show_afs_search.js'파일을 다운로드하십시오 http://www.google.com/afsonline/show_afs_search.js 결과가있는 동일한 디렉토리에 저장하십시오 .HTM 웹 페이지.

  2. results.htm 웹 페이지를 열고 스크립트로 라인 코드를 수정하십시오 ... src = "http://www.google.com/afsonline/show_afs_search.js"to : src = "show_afs_search.js"

  3. 나만의 'show_afs_search.js'파일을 열고 설정 너비를 수정하십시오 : a에서 너비 : "600"(또는 픽셀에서 너비를 설정하려는 모든 것)을 저장하고 'show_afs_search.js'파일을 저장하십시오.

  4. 동일한 디렉토리에서 호스팅 사이트에 두 파일을 업로드하십시오. results.htm 및 show_afs_search.js '

완료!

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

Google은 500px보다 작은 너비를 사용할 수 없습니다. 가장 좋은 방법은 iframe의 스타일을 만드는 것입니다.

<style>
#cse-search-results iframe {width: 200px; }
</style>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top