Google検索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>

<！> quot; googleSearchFrameWidth <！> quot;を変更しました。ピクセル単位で幅を設定する必要があると考えられる250まで（最初は600でした）。しかし、小さな画面（1024 * 768）では、divの側面からはみ出します。

私は何か愚かなことをしていますか？

役に立ちましたか？

解決

iFrameのサイズを変更するのと同じ問題に遭遇しました。 googleSearchFrameWidthの値を変更するとうまくいくと思いますが、いやです。

だから私はDOM操作に頼った。 iFrameの名前は<！> quot; googleSearchFrame <！> quot;なので、

の直後 
<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の位置に絞り込みます（複数のiFrameがある場合）。

他のヒント

調整可能な3つの設定がありますが、これらを組み合わせて、必要な場所に移動できることを願っています：

  1. googleSearchFrameWidth -JavaScriptでこれを希望の幅に設定します。これは最も明白なものであり、おそらくすでに調整したものです。
  2. cse-search-results divの幅-インラインスタイルステートメント（style ="width:500"など）を使用して、divの幅を設定します。
  3. IFrameスタイルの設定-チェックすると、このコンテンツすべてがIFrameを介してGoogleからレンダリングされていることに気付くでしょう。これは微調整するのが少し難しいですが、実行可能です。これを行うには、括弧内の実際のiframeスタイルを含む、#cse-search-results iframe { }などのスタイルシートの最後にステートメントを追加します。

これらのいずれか、またはこれらの組み合わせがあなたの答えになることを願っています。疑わしい場合は、Firebugで使用できるようなDOMインスペクターを使用して、DOMに対する変更の影響を分析します。これがお役に立てば幸いです。

UPDATE 22/06/10 -以下の簡単な解決策を見つけました。コード内の FORID の値を FORID：11 に変更します。したがって、コードの1行は次のようになります。

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

追加するだけで試してください

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

CSSで。

サイトの googleSearchFrameWidth を変更する簡単な手順：

  1. http://www.google.comから独自の「show_afs_search.js」ファイルをダウンロードします/afsonline/show_afs_search.js を実行し、results.htm Webページがある同じディレクトリに保存します。

  2. results.htm Webページを開き、行コードをスクリプトに変更します ... src = <！> quot; http：//www.google.com/afsonline/show_afs_search.js <！> quot; TO：src = <！> quot; show_afs_search.js <！> quot;

  3. 独自の「show_afs_search.js」ファイルを開き、設定幅を変更します：a 幅：<！> quot; 600 <！> quot; （またはピクセル単位で幅を設定するものは何でも）、独自の '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では、500ピクセル未満の幅を使用できません。あなたの最善の策は、iframeのスタイルを作成することです：

<style>
#cse-search-results iframe {width: 200px; }
</style>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top