親ページを閉じたときにサブウィンドウも閉じたい

このQ&Aのポイント
  • Javascriptを使用して、ページ上で画像をクリックするとサブウィンドウが表示されるような機能を作成しました。
  • しかし、別のページに遷移するか親ウィンドウを閉じた時にサブウィンドウも自動的に閉じるようにする方法について質問です。
  • Javascriptのコード改修やイベントリスナーの設定により、親ウィンドウが閉じられた時にサブウィンドウも閉じるようにする方法を教えてください。
回答を見る
  • ベストアンサー

親ページを閉じたときにサブウィンドウも閉じたい

こんにちは。 Javascriptでわからないことがあります。 アルバムを作っていて、画像をクリックすると、サブウインドウが表示されて、大きな画像が見られるようなページを作りたかったので、ネットで見つけたものを記載しました。 HEAD部分に以下を記載しました。 <SCRIPT LANGUAGE="JavaScript"> <!-- function new_win6(){window.open("サブウインドウ","","width=300,height=200"); } function win_close(){myWin.close(); } //--> </SCRIPT> BODY内には以下を記載しました。 <a href="#" onClick="JavaScript:new_win6();return false"> </a> 無事、サブウインドウが開いてできたのですが、そのあと別のページにとんだり、ウインドウを閉じたときに、サブウインドウが自動的に閉じるようにしたいと思っています。 本やネットで色々調べてみたのですが、つまづいてしまいました。 BODY部分にこのようなソースを記載すればいいというものじゃないのですよね? onload="win_open()" onunload="win_close()" 知らなすぎて申し訳ありませんが、ご教授願います。 よろしくお願いします。

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

  • ベストアンサー
noname#199778
noname#199778
回答No.1

<head>内のスクリプトを、 <SCRIPT LANGUAGE="JavaScript"> <!-- function new_win6(){ myWin=window.open("サブウインドウ","","width=300,height=200"); } function win_close(){myWin.close();} //--> </SCRIPT> <body>タグを、 <body onUnload="win_close()"> にしてみてください。 改造した点は、子ウィンドウを開くときにそれにmyWinというIDをふった点(IDを振らないと、うまくいかないと思います)と、<body>の開始タグ内に「onUnload="win_close()"」のイベントハンドラを入れた点です。 ご質問の中にあるonLoadは要りません。 これは、ページが読み込まれた際に、自動的に処理を行いたいときに記述します。 一応、Windows MeのIE 6とNetscape 7、Opera 6.05で動作確認してあります。 うまく動かなかったらごめんなさい。

kototo
質問者

お礼

お礼が遅くなって申し訳ありません。 無事できました! 基本もよくわかっていないので、コピペで解決させて いただいたのですが、きちんとわかるように 自分で勉強しないといけないと思いました。 ただ本じゃさっぱりわからなくて・・・ 本当にありがとうございました^^

関連するQ&A

  • スタイルシートが実行できません・・・

    HPを作っています。 下記の通りにCSSを組み込んだのですが、実行されません。ちなみにただの画像とテキストだけのページに同じCSSを組み込みましたら、実行されました。 原因がわかりません。 Javascriptと何か関係があるのでしょうか? ------------------------------------------- <head> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- body{ color:#444444; background-attachment:fixed; font-family:"MS UI Gothic"; font-size:8px; } --> </style> <SCRIPT LANGUAGE="JavaScript"> <!-- function new_win6(){ myWin=window.open("album1.html","","width=300,height=200"); } function win_close(){ myWin.close();} //--> </SCRIPT> </head> -------------------------------------------- ご存知の方がいらっしゃいましたら、教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • サブウィンドウを表示させたいのですが・・・

    こんにちわ。 ちょっとした(といっても、ワード文書1ページ分)説明をサブウィンドウで表示させたいのですが、 できません。 以下がソースです。 <メインウィンドウ> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function winOpen(winName,url,W,H){ //サブウインドウオープン var WinD11=window.open(url,winName,'scrollbars=1,width='+W+',height='+H+''); WinD11.document.close() } //--> </SCRIPT> </HEAD> <BODY> <A HREF="javascript:function voi(){};voi()" onClick="winOpen('','link1.html',400,200)"> この文字をクリックすると説明ウインドウ1が開きます </A> </BODY> 何が間違ってるのかご指導いただけないでしょうか? よろしくお願いいたします。m(__)m

  • onunLoadを指定ページでだけ除外する方法

    お世話になります。 自分のブログを閉じた際に、javascriptのonunloadを使って 別のウィンドウが開くようにしたのですが、 閉じた時以外にも、ブログ内のリンクをクリックして 別のページに飛んだ際にまで窓が開いてしまいます。 ブログ内のリンクを踏んだ際は、スクリプトが作動しないようにするには、 どうすればよいでしょうか? (ちなみに当方javascriptは素人です;) ちなみに自分の使ったのは、 <SCRIPT LANGUAGE=JavaScript TYPE=text/javascript> var Path = 1; function OpenWindow(url) { if(Path == 1){ OpenWin=window.open(url,"PopUp","toolbar=0,location=0,status=0,menubar=0,scrollbars=0,resizable=0,wi dth=1150,height=780"); OpenWin.blur(); window.focus(); } } </SCRIPT> And in the body tag: <body onunload="OpenWindow('http://www.新たに開くページ.html')"> よろしくお願い致します。

  • サブウィンドウ関係のコードの改造

    以下に、1、2と二つのHTMがあり、1をベースに、下記の改造をしたいと思います。 (1) 1.htmの小窓を、IEでしか動かないWebページダイアログ(showModelessDialog)でなく、 2.htm にあるような、win.openに変えたいのですが、移植の仕方がわかりません。1.htmをどう書き換えたらいいですか。 (2) 1.htmにあるmyimg.gifの幅(width)を取得して、dialogWidthにセットしたいのですが、その書き方をご教示ください。 高さ(height)は、2.htmにある「getScreenHEIGHT()」をそのまんま流用します。 (3) 1.htm に「href="#"」ありますが、「href="javascript:function voi(){};voi()"」などと記述したほうがいいのでしょうか。 「voi(){};voi()」なんてどこからコピペしてきたキーワードなのか、自分でもわからないのですが。 1.htm ------------------------ <html> <head> <script> function openKomado(url,winTitle) { var Win=showModelessDialog(url,window, 'center:yes;scroll:no;status:no;help:no;edge:raised;dialogWidth:100px;dialogHeight:100px',winTitle); with (Win.document) { write('<html><head><title>' + winTitle + '</title></head><body>'); write('<img src="' + url + '" onclick="window.close();" alt="閉じる">'); close(); } } </script> </head> <body> <a href="#" onClick="openKomado('myimg.gif','題名')">開く</a> </body> </html> 2.htm ------------------------ <html> <head> <script> function openNewWin(url, name){ window.open(url, name, 'scrollbars=yes,top=0,left='+(getScreenWIDTH()-680)+',width='+680+',height='+(getScreenHEIGHT()+20)); } function getScreenHEIGHT(){ if(!!window.screen){ return screen.height-80; }else{ return null; } } function getScreenWIDTH(){ if(!!window.screen){ return screen.width-12; }else{ return null; } } </script> </head> <body> <a href="#" target="new" onClick="openNewWin('./sample.htm','a'); return false;">開く</a> </body> </html>

  • サブウィンドウから、親ページのリンクを操作し、自身は閉じるやり方

    すいません。javascriptに詳しい方、教えて下さい。 今、親ページからポップアップで、サブウインドウを開いています。 やりたいことは、サブウィンドウにあるcloseボタンを押したら、 親ウィンドウを指定のページに移動して表示させ、サブウィンドウ自身は閉じる動作がしたいです。 調べてみたら、opener.location.hrefというのを使えばできるみたいなのですが、こういう記述で大丈夫なのでしょうか? プレビューしてみたら、一応動いてくれているみたいですが、文法的にはどうなのでしょうか? 教えていただければ、ありがたいです。 以下にソースを記述します。 <a href="index.htm#F" onClick="opener.location.href='index.htm#F; return false;" javascript:window.close();">

  • 親ウィンドウのボタンからサブウィンドウを閉じたいのですが・・・。

    いつもお世話になっています。 JavaScript初心者です。 window.closeについて質問させて下さい。 メインウィンドウにある「next」という次のページに移るボタンをクリックすると、開かれているサブウィンドウを閉じる処理を実行したいのですが、window.closeを使えばいいということしか分からず、何をどこに書けば良いのか困っています。(サブウィンドウにも「閉じる」ボタンを作成していますが、親ウィンドウからも操作が出来るようにしたいと思っています。) どうか教えていただけませんでしょうか。 ソースは次の通りです。 ----------------------------- //サブウィンドウの表示 <script language="JavaScript"> function sub(msg){ var page =window.open("", "HintPage","screenX=400,screenY=600,left=400,top=600,width=400,height=250,scrollbars=yes,resizable=yes"); page.document.open(); page.document.writeln("<html>"); page.document.writeln("<head><title>{test}</title></head>"); page.document.writeln("<body leftmargin=\"15\" rightmargin=\"15\" topmargin=\"20\">"); page.document.writeln("<h3>[ {test} ]</h3><hr><br>" + msg + "<br><br><hr><br>"); page.document.writeln("<div align=center>"); page.document.writeln("<input type=button value=close onclick=\"javascript:window.close()\"></div>"); page.document.writeln("</body>"); page.document.writeln("</html>\n"); page.document.close(); page.focus(); } </script> </HEAD> //「next」ボタンの表示 <body> <table cellpadding=3 cellspacing=5 align="right"> <tr> <td bgcolor="#9999ff" align="right"><input type="submit" name="next" value="{nextBtn}" style="width: 140px; height: 20.5px;" onClick="setPname('{next}')" {disabled2}></td></tr> </table> </body> ---------------------------- どうぞよろしくお願い致します。 説明不足の点がありましたら補足させて頂きます。

  • サブウィンドウ関係のコードの改造(その2)

    文末のコードは http://oshiete1.goo.ne.jp/qa3161625.html にてNo2ご教示いただいたものですが、 (1) 1回サブウィンドウを開くと2回目以降、うんともすんとも言わなくなってしまいます(スクリプトエラーにもなりません)。なぜでしょうか? (2) 開いたサブウィンドウのソースをみると、 <HTML></HTML>としか書かれていませんが、タイトルは「題名1」とセットされてますし画像も表示されています。なぜでしょうか。 開いたサブウィンドウの上下左右の余白をゼロにしたいので <body style="margin: 0px;">などとしたいのですが。 以上、よろしくお願い致します。 <html> <head> <script> function openNewWin(url,winTitle){ //画像オブジェクト作成 var img = new Image(); img.src = url; //画像のロード後に窓を開く img.onload=function(){ //画像の横幅 var width = this.width; //画像の横幅でabout:blankを開く var Win=window.open("", "new", 'scrollbars=yes,top=0,left='+(getScreenWIDTH()-width)+',width='+width+',height='+(getScreenHEIGHT()+20)); //Winのdocumentにタイトルをつける Win.document.title = winTitle; Win.document.body.innerHTML = '<img src="' + this.src + '" onclick="window.close();" alt="閉じる">'; } } function getScreenHEIGHT(){ if(!!window.screen){ return screen.height-80; }else{ return null; } } function getScreenWIDTH(){ if(!!window.screen){ return screen.width-12; }else{ return null; } } // --> </script> </head> <body> <a href="#" onClick="openNewWin('myimg1.gif','題名1')">開く1</a> <a href="#" onClick="openNewWin('myimg2.gif','題名2')">開く2</a> </body> </html>

  • サブウィンドウに背景色をつけたいのですが・・・

    今仕事でホームページを初めて作成しています。 そこで、30秒程度したら自動的に消えるサブウィンドウを作成したのですが、背景色がぜんぜんつきません。 いったいどこに、背景色のスクリプトを表示したらいいのですか。教えてください。 初心者でわからないので、全部のせてしまいました・・・ 要領わるくてすいません。 function createSubWindow() { subWindow = window.open("","SubWindow","width=370,height=220"); subWindow.document.writeln("<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=Shift_JIS'>"); subWindow.document.writeln("<HTML>"); subWindow.document.writeln("<HEAD>"); subWindow.document.writeln("<TITLE>Whata's New?</TITLE>"); subWindow.document.writeln("<SCRIPT LANGUAGE='JavaScript'>"); subWindow.document.writeln("<!--"); subWindow.document.writeln("function setTimer() {"); subWindow.document.writeln("window.setTimeout('window.close()', 30 * 1000);"); subWindow.document.writeln("}"); subWindow.document.write ("//--"); subWindow.document.writeln(">"); subWindow.document.writeln("</SCRIPT>"); subWindow.document.writeln("</HEAD>"); subWindow.document.writeln("<BODY onLoad='setTimer()'>"); subWindow.document.writeln("</BODY>"); subWindow.document.writeln("</HTML>"); subWindow.document.close(); } function closeSubWindow() { if(!subWindow.closed) { subWindow.close(); } } //--> </SCRIPT>

  • dummyページを一瞬で開き、閉じるjavascriot

    例えば、あるページを開いたときにサブウィンドウで yahooを開き、そのあとすぐにそのサブウィンドウ(yahoo)を 閉じる処理を行いたいのですが、うまくいきません。 ちなみに、以下のように記述しました。 <html> <head> <title></title> <script language="JavaScript"> <!-- function Dummy_Window() { window.open("http://www.yahoo.co.jp","window1","width=400,height=80"); window.close("http://www.yahoo.co.jp","window1"); } // --> </SCRIPT> </head> <body onload="Dummy_Window();"> </body> </html>

  • マウスアウトでサブウィンドウを閉じる

    ホットスポットのマウスオーバーでサブウィンドウを開き、マウスアウトでそのウィンドウを閉じたいのですが、マウスアウト時にエラーになります。 ホットスポットには <area shape="rect" onMouseOver="javascript: openWindow2()" onMouseOut="javascript: closeWindow2()">のように記述し、JAVASCRIPTは以下のように記述しています。 <script language="javascript"> function openWindow2() { window.open("date.htm","window5","WIDTH=475,HEIGHT=430"); } function closeWindow2() { window5.close(); } </script> どこを直せば正常に動くようになるでしょうか。

専門家に質問してみよう