- ベストアンサー
プレビューウインドウ
CEEK.JPで検索すると↓のようになりますが、 http://www.ceek.jp/search.cgi?q=%B6%B5%A4%A8%A4%C6goo このプレビューという機能が便利で自身のホームページに設置したいと考えましたが、どのようにすればいいのか教えて下さい。ソースを見た限りではJava Scriptだとは思うのですが、イマイチどの記述がこの機能を果たしてるのかわかりません。 教えてください。
- ss696
- お礼率94% (868/915)
- JavaScript
- 回答数6
- ありがとう数7
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
> IFRAMは使用していないようなんですが http://www.ceek.jp/preview.js を読むとわかりますが使っています。 サンプルを作ってみました。 最新バージョンであればたいていのブラウザで動くと思います。(IE6とFirefoxでしか試してませんが。) <html> <head> <title>プレビュー</title> <script type="text/javascript"> <!-- function PreView(oA){ if(! document.createElement) return true; if(oA.firstChild.nodeValue=='プレビュー') { var NewIFRAME = document.createElement('iframe'); NewIFRAME.width='100%'; NewIFRAME.height='200'; oA.parentNode.replaceChild(NewIFRAME,oA); NewIFRAME.parentNode.insertBefore(oA,NewIFRAME); NewIFRAME.src=oA.href; oA.firstChild.nodeValue='閉じる'; } else { var TargetFrame = oA.nextSibling; oA.parentNode.removeChild(TargetFrame); oA.firstChild.nodeValue='プレビュー'; } return false; } //--> </script> </head> <body> <p> 教えてgoo <a href="http://oshiete1.goo.ne.jp/" onclick="return PreView(this);">プレビュー</a> </p> <p> Google <a href="http://www.google.co.jp/" onclick="return PreView(this);">プレビュー</a> </p> </body> </html>
その他の回答 (5)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>innerHTMLは初めて聞きました。 innerHTMLは、その指定した要素の内容にHTMLを記述するプロパティです。 例えば、 <p ID="SAMPLE"></p> とか書いてあるタグが有る時 document.getElementById("SAMPLE").innerHTML="<b>ボールドになります</b>"; とすると <p ID="SAMPLE"><b>ボールドになります</b></p> と初めから書いたのと同じ意味になります。 似たものに、innerTextがあります。こちらは、HTMLでなくテキストを書きます。 同じようにouterHTMLは、外側ってことですね。 IE非対応なのはかないませんね。難しいですね。 ＞DOMはダイナミックHTMLのことですね。 DOM:Document Object Modelで 書かれている要素をツリー上に構成されているものとして、扱うことができます。HTMLで、コレを利用してダイナミックに構成や内容を変更することができますが、DHTMLだけというわけでなく、XMLなどもこれを利用してスクリプトからアクセスします。
お礼
ひゃ～とてもすぐには理解できません。今回はこれで締め切らせていただいて、今後自分で勉強に取り組んでいきたいと思います。
- steel_gray
- ベストアンサー率66% (1052/1578)
DOMは基本的にはおすすめなんですが、CEEK.JPのように同時にレイアウト用のテーブルなども一緒に展開したい場合、ちょっと面倒になってきます。 スタイルシートを使いこなせれば、サンプルのようにiframeだけを展開すれば済むのですが・・・ #1の方法ならば必要なタグを並べて、ひっくるめて隠したり表示したりできるので、場合によっては#1の方法のほうが適しています。
お礼
ありがとうございます。なかなか奥が深くて一朝一夕にはいかないのが現状です。。。 コツコツと勉強してまいりたいと思います。 サンプル、活用させていただきます。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>CEEK.JPではどちらの回答のものを使ってるんですか？ innerHTML等を使って動的に作成していますので、どちらでもないです。 innerHTML等は、便利に使えますが、ＩＥ互換のブラウザでしか使えませんから、#2の方法の方が優れています。（ＤＯＭに対応していないブラウザではだめだが、最新のブラウザならほとんど対応していると思います）
お礼
innerHTMLは初めて聞きました。隠しフレームというやつですかね。 IE非対応なのはかないませんね。難しいですね。 DOMはダイナミックHTMLのことですね。 ありがとうございました。 勉強いたします。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#1>具体的にはどうするんでしょうか？ 例えば、IFRAMEにIF1とか名前とIDを付けたら javascriptから IF1.location.href="test.html"; の様にして、表示する内容を変更できます。 getElementById('IF1').style.display="none"; にすれば非表示にできます。 そういうことする関数を、たとえばボタンに割り当てれば、切り替えができます。 ボタン自体の表示の文字も閉じる、プレビューの様に切り替えることができます。 実際にサンプルを書いてみようかと思いましたが、 ＃２様のサンプルが素晴らしいので、止めときます。
お礼
なるほど～IDを付けるのですね。CEEK.JPではどちらの回答のものを使ってるんですか？ まだもう少し勉強が少ない。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
＞どの記述がこの機能を果たしてるのか IFRAMEを動的に作って指定したＵＲＬの内容を表示しているようです。 動的にIFRAMEを作るのに、outerHTMLとかを使ったら、ＩＥのみでしか実現できませんので、 簡便には IFRAMEのlocation.hrefにＵＲＬをセットして 表示する。 IFRAME自体は、displayを切り替える で似たような機能を実現できるような気がします
お礼
ありがとうございます。具体的にはどうするんでしょうか？単にIFRAMEでURL先を表示すると閉じたり開いたりできませんよね？またIFRAMは使用していないようなんですが、どうなんでしょうか。 locationはやってみましたがうまくいきませんでした。やり方が悪かったのかな。
お礼
ありがとうございます。すばらしいですね。IFRAM…載ってましたか？ サンプル、大いに活用させていただきます。