この記事は 3 年 4 ヶ月 25 日 前に書かれたものです。最新の情報とは異なる場合がありますのでご注意ください。
4ヶ月前からこのサイトに導入している Google Custom Search ですが、検索結果をインラインフレームで自サイト内に表示する方法は、JavaScript が利用されていますので JavaScript が無効な環境では何も表示されません。
一方、検索結果を Google のサイトで表示すれば、JavaScript が無効な環境でも利用できますが、やはり自サイト内に表示したいという思いもあります。
＃検索結果を Overlay 表示する方法はキーボードだけで操作できないので論外。
そこで、JavaScript が有効な環境ではインラインフレームで、無効な環境では Google のサイトで検索結果を表示する方法を考えました。
まず、インラインフレームで表示する場合の、検索窓のオリジナルのソースコードは次の通りです。
<form action="（検索結果を表示するURL）" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="**********" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="検索" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>※ action 属性の値 "（検索結果を表示するURL）" と ********** の部分はそれぞれ利用者によって異なります。
一方、Google のサイトで表示する場合のオリジナルのソースコードは次の通り。
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="**********" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="検索" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>この2つのソースコードで異なるのは、form 要素の action 属性の値と、<input type="hidden" name="cof" value="FORID:11" /> の有無です。
そこで、基準を Google のサイトで表示するソースコード、つまり JavaScript が無効な場合とし、JavaScript が有効な場合は form 要素の action 属性の値を書き換え、<input type="hidden" name="cof" value="FORID:11" /> を追加します。
そのソースコードは以下の通りです。
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="**********" />
<script type="text/javascript">
//<![CDATA[
document.write('<input type="hidden" name="cof" value="FORID:11" />');
//]]>
</script>
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="検索" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=ja"></script>
<script type="text/javascript">
//<![CDATA[
function SearchForm() {
var form = document.getElementById('cse-search-box');
form.action = "（検索結果を表示するURL）";
}
Event.observe(window, 'load', SearchForm, false);
//]]>
</script>これで、JavaScript が有効な環境ではインラインフレームで、無効な環境では Google のサイトで検索結果が表示されます。
9月24日追記
prototype.js を <head>〜</head> の中で読み込ませておく必要があります。
Recent Comments