JavaScriptとiframeで、Googleイメージ検索の画像をランダムに表示する方法

オリジナルのGoogle Random Image

google hack from douwe osinga にオリジナルのソースと説明があります。 実際に設置してみたJavaScriptのコードと サンプル例(IEでないと動かないと思います)。

walkHtml()でページの文章を取得し、 boxfill()で単語ごとに切り分けてloadword()を一定時間ごとに呼び出しているようです。 loadword()で、Googleから画像を呼び出して表示しています。 id「searchLabel」のspanに検索キーワード、id「imagebox」のインラインフレーム(iframe)に画像を出しています。

JavaScriptで、

imagebox.document.body.innerHTML='<iframe width=1000 height=1000 
src="http://images.google.com/images?&q='+escape(searchfor)+'"></iframe>';
imagebox.scrollTo(50,200);

と、Googleの検索結果を取得しつつ、画面をスクロールして、表示部分のインラインフレーム(iframe)を、

<iframe id="imagebox" width="150" height="130"  vspace="0" hspace="0" frameborder="0" scrolling="no">></iframe>

とする事で、一部分を切り出す仕組みです。

残念ながら、Firefoxでは、動きませんでした。replaceNode～や、imagebox～のあたりが、どうも良くないみたいです。

Firefoxでも(多分動く)、Googleイメージの画像ランダム表示

元々のGoogle Random Imageは、2(javascriptをHTMLに直に書けば１)つのファイルで動くのですが、 僕が書いたのだと、3(or 2)つのファイルで動きます。りょーちさんのソースを参考に、ランダムに単語を指定して表示する仕組みです。

表示用のページ(index.html)と Googleイメージ検索を呼び出すページ(gri.html)と gri.htmlから呼び出すJavaScript(gri.js) の三つです。

JavaScript(gri.js)をgri.htmlで呼び出し、Googleの検索結果画面を取得しています。

document.getElementById("imagebox").src=baseurl+encodeURI(searchfor);
document.getElementById("searchlabel").innerHTML=searchfor;
window.scrollTo(20,190);

の部分が、オリジナルと対応している所です。

表示用(index.html)と、呼び出し(gri.html)にある インラインフレーム(iframe)それぞれのサイズで表示を調節しています。

直接index.htmlからGoogleの画面を呼び出したものを、スクロールする事がうまく出来なかったので、 仕方なく、iframeで呼び出したgri.htmlをgri.jsでスクロールしています。 (画面の表示位置を変えるためだけに、１ファイル余計に使っている！しかも、ブラウザによっては、うまくスクロールしてくれない！)

(誰か改良してくれないかな。scrollTo()を、どうやったらうまくインラインフレームに適用できるのか、よくわからない)。

iframe(インラインフレーム)とJavaScript

iframe(インラインフレーム)内の情報を引っ張ってこれないかなと思って検索しました。メモ。

• 人力検索はてな - iframeとJavaScriptについての質問です。
• JavaScript クロスブラウザに関するメモ - とみぞーノート
• JavaScript インラインフレーム(iframe)関連 - とみぞーノート
• JS:iframeの内容を取得する方法

なんだか、難しそうだ…。 「document.getElementById('フレームのID').contentDocument」というのは、初めて知りました。 こんなのがあるなんて！