- ベストアンサー
JavaScriptで小窓が開くようにしたいのですが
今配布のCGI掲示板をサーバーに設置してるのですがJavaScriptで 小窓が開くようにしたいのですがJavaScriptは詳しくないので困っています。 OKwaveで例えると、 OKwaveコミュニテー＞コンピューター > プログラミング > CGI と画面上にありますが、例えばプログラミングをクリックすると小窓が開くような感じにできないものか？ オプションの枠があるので、そこからURLなら設置できるようにはなっていますが？ ご存知の方ご指導よろしくお願いします。
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こっちは、<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)
- yyr446
- ベストアンサー率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> 尚、絵文字一覧のページは勝手にインライン表示できないようにアクセス制限があるみたいです（？）。
- yyr446
- ベストアンサー率65% (870/1330)
小窓を開くっててどんなイメージですか？ オプションの枠って何ですか？ <a href="hoge.html" target="_blank">でも別窓で開くけど javascriptなら windows.open("hoge.html", "_blank"); で、窓のオプションもいろいろ指定できるけど。 あるいは、インラインフレーム<iframe>内に表示させたいって事かな？
補足
イメージとしてはjavascriptだと思いますがプログラミング >をクリックすると画面の左上に小窓が勝手に開くようにしたいのですが？ その小窓に下の外部のページを表示させられないものかと・・・ http://n-mame.hp.infoseek.co.jp/emoji/emoji02j.html オプションの枠というのはプログラミング >といった項目を自由に作成できてHTMLなどが使えるようになってます。