アプリ版：「スタンプのみでお礼する」機能のリリースについて

プレビューウインドウ

解決済

  • 質問者：ss696
  • 質問日時：
  • 回答数：6件

CEEK.JPで検索すると↓のようになりますが、
http://www.ceek.jp/search.cgi?q=%B6%B5%A4%A8%A4% …
このプレビューという機能が便利で自身のホームページに設置したいと考えましたが、どのようにすればいいのか教えて下さい。ソースを見た限りではJava Scriptだとは思うのですが、イマイチどの記述がこの機能を果たしてるのかわかりません。
教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.1

  • 回答者： BLUEPIXY
  • 回答日時：

＞どの記述がこの機能を果たしてるのか


IFRAMEを動的に作って指定したＵＲＬの内容を表示しているようです。

動的にIFRAMEを作るのに、outerHTMLとかを使ったら、ＩＥのみでしか実現できませんので、
簡便には
IFRAMEのlocation.hrefにＵＲＬをセットして
表示する。
IFRAME自体は、displayを切り替える
で似たような機能を実現できるような気がします
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。具体的にはどうするんでしょうか？単にIFRAMEでURL先を表示すると閉じたり開いたりできませんよね？またIFRAMは使用していないようなんですが、どうなんでしょうか。
locationはやってみましたがうまくいきませんでした。やり方が悪かったのかな。

通報する
お礼日時：2005/01/22 13:45

No.2ベストアンサー

  • 回答者： steel_gray
  • 回答日時：

> 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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。すばらしいですね。IFRAM…載ってましたか？
サンプル、大いに活用させていただきます。

通報する
お礼日時：2005/01/23 02:02

No.3

  • 回答者： BLUEPIXY
  • 回答日時：

#1>具体的にはどうするんでしょうか？


例えば、IFRAMEにIF1とか名前とIDを付けたら
javascriptから
IF1.location.href="test.html";
の様にして、表示する内容を変更できます。
getElementById('IF1').style.display="none";
にすれば非表示にできます。
そういうことする関数を、たとえばボタンに割り当てれば、切り替えができます。
ボタン自体の表示の文字も閉じる、プレビューの様に切り替えることができます。
実際にサンプルを書いてみようかと思いましたが、
＃２様のサンプルが素晴らしいので、止めときます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

なるほど～IDを付けるのですね。CEEK.JPではどちらの回答のものを使ってるんですか？
まだもう少し勉強が少ない。

通報する
お礼日時：2005/01/23 02:05

No.4

  • 回答者： BLUEPIXY
  • 回答日時：

>CEEK.JPではどちらの回答のものを使ってるんですか？


innerHTML等を使って動的に作成していますので、どちらでもないです。
innerHTML等は、便利に使えますが、ＩＥ互換のブラウザでしか使えませんから、#2の方法の方が優れています。（ＤＯＭに対応していないブラウザではだめだが、最新のブラウザならほとんど対応していると思います）
    • good
    • 0
    • 件
通報する
この回答へのお礼

innerHTMLは初めて聞きました。隠しフレームというやつですかね。
IE非対応なのはかないませんね。難しいですね。
DOMはダイナミックHTMLのことですね。
ありがとうございました。
勉強いたします。

通報する
お礼日時：2005/01/24 01:10

No.5

  • 回答者： steel_gray
  • 回答日時：

DOMは基本的にはおすすめなんですが、CEEK.JPのように同時にレイアウト用のテーブルなども一緒に展開したい場合、ちょっと面倒になってきます。


スタイルシートを使いこなせれば、サンプルのようにiframeだけを展開すれば済むのですが・・・

#1の方法ならば必要なタグを並べて、ひっくるめて隠したり表示したりできるので、場合によっては#1の方法のほうが適しています。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。なかなか奥が深くて一朝一夕にはいかないのが現状です。。。
コツコツと勉強してまいりたいと思います。
サンプル、活用させていただきます。

通報する
お礼日時：2005/01/25 00:19

No.6

  • 回答者： BLUEPIXY
  • 回答日時：

>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などもこれを利用してスクリプトからアクセスします。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ひゃ～とてもすぐには理解できません。今回はこれで締め切らせていただいて、今後自分で勉強に取り組んでいきたいと思います。

通報する
お礼日時：2005/01/25 00:23

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報