• ベストアンサー
  • 困ってます

JavaScriptで小窓が開くようにしたいのですが

  • 質問No.5378480
  • 閲覧数111
  • ありがとう数1
  • 気になる数0
  • 回答数3
  • コメント数0
今配布のCGI掲示板をサーバーに設置してるのですがJavaScriptで
小窓が開くようにしたいのですがJavaScriptは詳しくないので困っています。
OKwaveで例えると、
OKwaveコミュニテー>コンピューター > プログラミング > CGI
と画面上にありますが、例えばプログラミングをクリックすると小窓が開くような感じにできないものか?
オプションの枠があるので、そこからURLなら設置できるようにはなっていますが?

ご存知の方ご指導よろしくお願いします。

質問者が選んだベストアンサー

  • 回答No.3
  • ベストアンサー

ベストアンサー率 65% (870/1330)

こっちは、<iframe>やCSSを使わず、javascriptのwindow.open()
で別窓を開くサンプルです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>test</title>
<script type="text/javascript" charset="utf-8">
<!--
//@cc_on
window.onload = function(){
document./*@if (@_jscript)attachEvent('on'+ @else@*/addEventListener(/*@end@*/
'click', function(evt){
/*@if (@_jscript) event.returnValue = false;@else@*/ evt.preventDefault(); /*@end@*/;
var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;
if(e.parentNode.id=="koumoku" && e.nodeName=="A"){
var url= e.getAttribute("href");
komado_open(url);
}
},false);
}
function komado_open(url){
window.open(url,"komado","top=50,width=350,height=500,location=no,menubar=no,directories=no,toolbar=no,status=no,scrollbars=yes,resizable=yes");
}
// -->
</script>
</head>
<body>
<div id="koumoku">
<a href="http://oshiete1.goo.ne.jp">教えて!goo</a>
>
<a href="http://oshiete1.goo.ne.jp/c205.html">[技術者向] コンピューター</a>
>
<a href="http://oshiete1.goo.ne.jp/205/c221.html">プログラミング</a>
>
<a href="http://n-mame.hp.infoseek.co.jp/emoji/emoji02j.html">絵文字一覧</a>
</div>
</body>
</html>

その他の回答 (全2件)

  • 回答No.2

ベストアンサー率 65% (870/1330)

リンク先を左上の<iframe>内に読み込み、クリックで表示・非表示を
切り替えるサンプルです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>test</title>
<style type="text/css">
<!--
.komado {position:absolute;left:10px;top:10px;z-index:99;background-color:white;
width:350px;height:500px;visibility:hidden;}
.tojiru {position:absolute;left:10px;top:10px;z-index:100;
width:30px;height:30px;visibility:hidden;}
// -->
</style>
<script type="text/javascript" charset="utf-8">
<!--
window.onload = function () {
if(window.ActiveXObject){ //IEの場合のイベント登録
document.attachEvent('onclick',function(){
event.returnValue = false;
var e = event.srcElement;
if(e.parentNode.id=="koumoku" && e.nodeName=="A"){
var target= e.getAttribute("href");
document.getElementById("komado").setAttribute("src",target);
document.getElementById("komado").style.visibility="visible";
document.getElementById("tojiru").style.visibility="visible";
}
});
}else{ //標準ブラウザーの場合のイベント登録
document.addEventListener('click',function(evt){
evt.preventDefault();
var e = evt.target;
if(e.parentNode.id=="koumoku" && e.nodeName=="A"){
var target= e.getAttribute("href");
document.getElementById("komado").setAttribute("src",target);
document.getElementById("komado").style.visibility="visible";
document.getElementById("tojiru").style.visibility="visible";
}
},true);
}
}
function tojiru(){
document.getElementById("komado").style.visibility="hidden";
document.getElementById("tojiru").style.visibility="hidden";
}
// -->
</script>
</head>
<body>
<div id="koumoku">
<a href="http://oshiete1.goo.ne.jp">教えて!goo</a>
>
<a href="http://oshiete1.goo.ne.jp/c205.html">[技術者向] コンピューター</a>
>
<a href="http://oshiete1.goo.ne.jp/205/c221.html">プログラミング</a>
>
<a href="http://n-mame.hp.infoseek.co.jp/emoji/emoji02j.html">絵文字一覧</a>
</div>
<iframe id="komado" src="about:blank" class="komado"></iframe>
<input id="tojiru" type="button" value="×" onclick="tojiru();" class="tojiru" />
</body>
</html>
尚、絵文字一覧のページは勝手にインライン表示できないようにアクセス制限があるみたいです(?)。
  • 回答No.1

ベストアンサー率 65% (870/1330)

小窓を開くっててどんなイメージですか?
オプションの枠って何ですか?

<a href="hoge.html" target="_blank">でも別窓で開くけど
javascriptなら
windows.open("hoge.html", "_blank");
で、窓のオプションもいろいろ指定できるけど。

あるいは、インラインフレーム<iframe>内に表示させたいって事かな?
補足コメント
noname#147697
イメージとしてはjavascriptだと思いますがプログラミング >をクリックすると画面の左上に小窓が勝手に開くようにしたいのですが?
その小窓に下の外部のページを表示させられないものかと・・・
http://n-mame.hp.infoseek.co.jp/emoji/emoji02j.html

オプションの枠というのはプログラミング >といった項目を自由に作成できてHTMLなどが使えるようになってます。
投稿日時:2009/10/19 12:59
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

ピックアップ

ページ先頭へ