2009年11月28日土曜日

Googleサイト内検索結果でページの下端が切れる問題

検索向けAdSenseによるサイト内検索で、IE以外だと検索結果の下端が切れてしまう問題について。


【発生条件】
検索結果を自分のサイト内に表示する場合に起きる。
広告を右のみにした場合に起きた。広告を他の位置にしたら起きないかも。
Firefox(3.5)、Google Chrome(4)、Safari(4 Windows版)で発生を確認した。


【現象】
検索結果の内容に関わらず、検索結果を表示するiframe(JavaScript http://www.google.com/afsonline/show_afs_search.js により生成される)の高さが常に1200pxになる。
その結果、検索結果が少ない場合は検索結果とフッターの間に大きな空白ができる。反対に検索結果が多い場合、検索結果の下端に表示されるページ番号の表示が途中で切れてしまったり表示されなくなってしまう。(実際にはframeの外側にあり、かつframeのスクロールバーが非表示になっているので隠れているだけだが。)


IEの場合、iframe内の検索結果のHTMLのbody要素に、onloadで下記のようなJavaScriptを実行している。

onload="window.top.location='http://(親windowの検索結果のURL)#'+document.body.scrollHeight;"
これにより、親windowのURLの末尾にiframe内のコンテンツの高さを表すhashが付く。

そして検索結果のshow_afs_search.jsの方でlocation.hashを取得し、それをiframeの高さとして設定している。(0.01秒ごとに実行するという監視をしている。高さが取得できた後も。)
その結果、検索結果のコンテンツの内容に応じて検索結果をリサイズするというユーザーフレンドリーなユーザーインターフェイスを実現している。

試しに検索結果を表示した後、URLの最後に「#500」などと付けると検索結果の高さが変わる。これはFirefoxでも有効。


なぜIE以外ではiframe内のbodyのonloadのJavaScriptを付けないのだろう?Firefoxのセキュリティ等により無意味なんだろうか?


【回避策】
検索結果を表示するページのgoogleSearchXxxを設定しているJavaScriptに、下記のように高さを明示的に指定してあげる。
var var googleSearchFrameWidth = 800; //これは既存のコード
var googleSearchFrameHeight = 1210; //これを追加する
これにより、デフォルトの高さが1210pxになり、検索結果の下端が切れなくなる。

IEの場合、これでもリサイズが有効なので、この値は無視してリサイズしてくれると思う。

0 件のコメント:

ブログ アーカイブ

tags