- ベストアンサー
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>内に表示させたいって事かな？
関連するQ&A
- CGIで出来ているデータベースをJavaScriptの小窓で開く方法
CGIで簡単なデータベースを作っています。(キャラクター紹介) これをCGIの中ではなく、別の所に置かれたhtmlファイルのイメージマップ上にあるリンクをJavaScriptの小窓で開きたいと考えています。 CGIで作成されるページなので、URLは固定です。最後のレコードナンバーだけが変わります。(list.cgi?no=○○←ここの数字が変わるだけ) 表示サイズ・スクロールバーの有無などもすべて同じで固定です。 素人考えなので、書いていることさえおかしいかもしれませんが、こんな風にしたいのです。 ------- <SCRIPT language="JavaScript"> <!-- ここに開く命令・CGIのパスと表示サイズなどのオプションを記入 // --> </SCRIPT> //////// <A href="javascript" onclick="no(ここにNOを?)">リンク1</A> ----------- こんな感じです。(イメージマップなので、<A></A>の書き方はちょっと違うかもしれませんが…) リンクの数が増えてもナンバーだけを書き換えて追加できるようにしたいです。 色々と探し回ったのですが、<SCRIPT></SCRIPT>の中をページ数分増やすしか方法が書かれていなかったので… すごく困ってます。すばやい回答をお願いします。
- ベストアンサー
- JavaScript
- 教えてください
半年くらい前まであった、megabbsという掲示板についてです。 あの掲示板は、配布されている無料ＣＧＩを設置して作ったものなのですか？それとも、弐ch編者が自分で一からプログラムを作成して作ったものなのでしょうか？そもそもあのような掲示板は無料で配布されているＣＧＩプログラムを設置しただけで作れるものなのでしょうか？ また、megabbsのサーバーはどうしていたのでしょうか？ メガビは、確か弐ch編者が１７歳のころに開設したはずです。 自宅のサーバーだけで運営するのは難しかったはずだと思うのですが・・ 運営費(？)みたいなもの(？)はどうしていたのでしょうか？ 掲示板の広告費(？)ですかね？ あと、２ちゃんねるに関しても質問したいのですが、やはりあの程度の掲示板を作るためには結構なプログラミング技術(？)が必要なんですかね？もちろん、無料で配布されているＣＧＩプログラムを設置しただけでは無理ですよね？やはり一から勉強してそこそこプログラミング技術(？)を身につけてからではないと無理ですかね？そもそもあのくらいの掲示板を作るためにはどのくらいのプログラミング技術(？)が必要なのですか？そもそも、無料で配布されているＣＧＩプログラムを設置する場所は、１「自分が使っているプロバイダー」２「無料レンサバ」３「有料レンサバ」のうち、どれが一番良いのですか？３つそれぞれのメリット・デメリットを言った上で答えてもらえれば嬉しいです。将来的(？)には２ちゃんねるのような掲示板を作りたいと思っているのですが、どのくらいのプログラミング技術(？)が必要なのかとか、サーバーなどの運営面のことなどがよく分からないので教えてください。
- 締切済み
- CGI
- 小窓について教えて下さい。
小さい画像をクリックで、 大きな画像を小窓で見れるようにしたいのですが、 大きな画像のサイズが全部バラバラなのです。 （画像は合計８コあります） 通常は下記ＵＲＬで小窓を出しているのですが、 画像のサイズがバラバラの場合、 ８コのJavaScriptを書き込まなければいけないのでしょうか？ もし他に方法がありましたら、教えて下さい。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=568520 説明が分かりづらくて申し訳ありませんが、 宜しくお願い致します。
- ベストアンサー
- JavaScript
- 画像から小窓ウインドウに
JavaScriptでバナー画像をクリックすると小窓が開いて小窓の中に、その画像が大きく表示されるようにしたいのですが そういった方法ってあるのでしょうか？ ご存知でしたら、ぜひご指導して頂きたいのですが、 説明不足で上手く表現出来ていないようでしたら補足させて頂きますので、 よろしくお願いします。
- 締切済み
- JavaScript
- 複数ある小窓のサイズ。
今、HPビルダーのイベントで↓の様にしてあるんですが、 <SCRIPT language="JavaScript"> <!--HPB_SCRIPT_CODE_40 // _HpbJumpURLinNewWindow: 新規ウィンドウを開いて指定したURLにジャンプします。 // function _HpbJumpURLinNewWindow(url) { if (url != '') { window.open(url, '_blank',"scrollbars=1,width=710,height=430,top=150, left=200"); } } //--> </SCRIPT> がスクリプト部分でリンクしたい部分を <A onclick="_HpbJumpURLinNewWindow('http://～○○.cgi');" href="#">update</A> といった様に書いてあるのですが、 今メニュー全てがクリックすると同じサイズの小窓 で開くようになっています。それで一つだけ他のと 小窓のサイズを変えたいんですが、 その場合、どう書けばよいのでしょうか?
- ベストアンサー
- JavaScript
- 一ページに複数の小窓を設置したい。
こんにちは。検索もしましたがどうしてもわからないので教えてください。 ＨＰビルダーで一ページに複数の同サイズの小窓を表示させたいのです。 小窓は一つだけで、クリックした時は必ず前に来るようにしたいのです（常に前に出てきて欲しいわけではありません） 今はこのように設置しています。 <head>～</head> <script language="JavaScript"> <!--HPB_SCRIPT_CODE_40 function _HpbJumpURLinNewWindow(url) { if (url != '') { window.open(url, 'aaa',"width=650,height=700"); } } //--> </script> <BODY>～</BODY> <a onclick="_HpbJumpURLinNewWindow('△△.html');" href="javascript:void(0)"><img src="○○○.jpg" ></a> 同じウィンドウに表示できるようになりましたが、二つ目をクリックすると親ページの後ろに回ってしまいます。 解消する方法あるのでしょうか。 わかりにくい説明で申し訳ありませんがよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 小窓から親窓操作
小窓に表示された画像をクリックすると親窓にあるリストボックスの対象項目が選択される というものを作成しました。 IEとOperaではきちんと動いたのですが、ネスケ7.0とfirefox1.0.7では動作しませんでした。 alertを入れて試してみたところ、 window.opener.testform.testlist.options[no].selected = true; の一文がおかしいようなのですが、どう修正したら良いでしょうか？ 小窓はフォームのあるウィンドウからwindow.openで開いています。 --ソース-- <html> <head> <script language="javascript"> <!-- function imgselect(no){ window.opener.testform.testlist.options[no].selected = true; window.close(); } --> </script> </head> <body> <img src="画像URL1" onclick="javascript:imgselect(1)"><br> <img src="画像URL2" onclick="javascript:imgselect(2)"><br> <img src="画像URL3" onclick="javascript:imgselect(3)"><br> </body> </html>
- ベストアンサー
- JavaScript
- JAVAscriptかアプレットで可能でしょうか？・・・
いつもお世話になっております HPを作っているのですが、契約しているプロバイダのサーバーはCGIもSSIも使えないので 無料のCGIサーバーを使っていたのですが 重くて重くて使い物になりません・・ 比較的、軽いところを見つけても、1ヶ月くらいですぐに サーバーの限界が来ているようです。 そこでJAVAscriptもしくはJAVAAppletだけでアクセスカウンター 掲示板って作ることが出来るのでしょうか？ CGIを全く使わずに上記の『アクセスカウンター』と『掲示板』は作ることは可能でしょうか？ 正月明けてご多忙中とは存じますが宜しくお願い致します。 --------------------------- 便乗質問ですが・・・ XMLではどうでしょうか？
- 締切済み
- JavaScript
- 画像の小窓表示について
サムネイルの画像をクリックすると画像の小窓が表示されるようにしたのですが縦長の画像と横長の画像が有るため縦長の画像の右側に余白が出てしまい見栄えが良くありません。画像の周りの白い淵をなくしたいのですが下記のタグをどのように修正すれば良いのでしょうか。 ご指導の程よろしくお願いします。早々 <SCRIPT language="JavaScript"> <!--HPB_SCRIPT_CODE_40 function _HpbJumpURLinNewWindow(url) { if (url != '') { window.open(url, '_blank','width=500,height=400,left=600,top=50,screenX=600,screenY50,scrollbars=yes'); } } //--> </SCRIPT></HEAD>
- 締切済み
- ホームページ作成ソフト
- どうしても投稿だけできません。
レンタルサーバー（さくら）にＣＧＩ掲示板を設置しました。 http://apps.cside.com/cgi/crs/tcboard/ 他はちゃんと動作しますが、投稿だけ「Internal Server Error」がでてしまいます。 この手の質問があちこちあったので、参考にしてみましたがやはりだめです。 ・アクセス権なども何度も見直しました。 ・構文もどこかを消してしまったかもしれないので、新たに最初からやり直して設置もしました。 ・掲示板へのリンクも間違ってはいません。掲示板自体は動いています。管理やデザイン変更もできます。 もともとの構文が違ってるかもしれませんが、私の知識では１年ぐらいはかかりそうです。 サポートは終わってますが、前から配布していたみたいなので、構文が間違ってるとも思えません。 昨晩からずっとやってますが、なにをやっても投稿だけできません。 どうかご教授ください。よろしくお願いします。 この配布サイトの他の配布ＣＧＩ掲示板や、他サイトのＣＧＩ掲示板は問題なく設置できています。。
- ベストアンサー
- CGI
補足
イメージとしてはjavascriptだと思いますがプログラミング >をクリックすると画面の左上に小窓が勝手に開くようにしたいのですが？ その小窓に下の外部のページを表示させられないものかと・・・ http://n-mame.hp.infoseek.co.jp/emoji/emoji02j.html オプションの枠というのはプログラミング >といった項目を自由に作成できてHTMLなどが使えるようになってます。