アンカーまたはフォームで target 属性によってで開かれるウインドウは、そのウインドウを開いたウインドウを opener で知る事ができます。 ▼target 属性によるサンプル http://lightbox.matrix.jp/ginpro/html/win_control_01.htm ▼ textField こちら側では、アンカーで新しく開かれたウインドウを知る事ができないので、変数を用意しておいて、新しく開いたウインドウ側でセットしてもらいます こちら側の記述 拡張子:txtvbswsfjsphpjavahtmlutf8sjis <input type="text" name="textField"> <script type="text/javascript"> var openObject = null; </script> <input type="button" value="アンカーで開いたウインドウを閉じる" onclick="if( !openObject != null ) { openObject.close(); }"> 開いたウインドウの記述 拡張子:txtvbswsfjsphpjavahtmlutf8sjis <script> if ( !window.jQuery ) { if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) { if ( window.addEventListener ) { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; } else { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'; } } document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>"); } </script> <input type="button" value="データをセット" onclick='doAction();'> <script> // ********************************************************* // このウインドウを開いたウインドウにアクセス // ********************************************************* function doAction( strValue ) { var opener = window.opener; opener.document.getElementsByName("textField")[0].value = "データをセット"; } // ********************************************************* // ロード時のイベント登録 // // onload 時に screen オブジェクトが有効にならないので // タイマーを使用している // ********************************************************* window.onload = function () { // このウインドウを開いたウインドウのグローバル変数に、 // このウインドウオブジェクトをセット( 向こう側からこちら側にアクセス用 ) opener.openObject = window; } window.onbeforeunload = function() { alert("閉じます : onbeforeunload"); } $(window).bind('beforeunload', function() { alert("閉じます : onbeforeunload(jQuery)"); }); </script>
アンカーまたはフォームで target 属性によってで開かれるウインドウは、そのウインドウを開いたウインドウを opener で知る事ができます。
こちら側では、アンカーで新しく開かれたウインドウを知る事ができないので、変数を用意しておいて、新しく開いたウインドウ側でセットしてもらいます
<input type="text" name="textField"> <script type="text/javascript"> var openObject = null; </script> <input type="button" value="アンカーで開いたウインドウを閉じる" onclick="if( !openObject != null ) { openObject.close(); }">
<script> if ( !window.jQuery ) { if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) { if ( window.addEventListener ) { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; } else { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'; } } document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>"); } </script> <input type="button" value="データをセット" onclick='doAction();'> <script> // ********************************************************* // このウインドウを開いたウインドウにアクセス // ********************************************************* function doAction( strValue ) { var opener = window.opener; opener.document.getElementsByName("textField")[0].value = "データをセット"; } // ********************************************************* // ロード時のイベント登録 // // onload 時に screen オブジェクトが有効にならないので // タイマーを使用している // ********************************************************* window.onload = function () { // このウインドウを開いたウインドウのグローバル変数に、 // このウインドウオブジェクトをセット( 向こう側からこちら側にアクセス用 ) opener.openObject = window; } window.onbeforeunload = function() { alert("閉じます : onbeforeunload"); } $(window).bind('beforeunload', function() { alert("閉じます : onbeforeunload(jQuery)"); }); </script>
開いたウインドウ側で、元のウインドウ内の変数に オブジェクトをセットする事によって操作可能です http://lightbox.matrix.jp/ginpro/html/win_control_01.htm 開いたウインドウを閉じる 拡張子:txtvbswsfjsphpjavahtmlutf8sjis <script type="text/javascript"> function closeWindow() { try { if ( openObject.closed ) { alert("ウインドウはウインドウ側で閉じられました"); } else { openObject.close(); } openObject = null; } catch(e) { alert("ウインドウが存在しません"); } } </script> <input type=button value="閉じる" onclick="closeWindow();">
<script type="text/javascript"> function closeWindow() { try { if ( openObject.closed ) { alert("ウインドウはウインドウ側で閉じられました"); } else { openObject.close(); } openObject = null; } catch(e) { alert("ウインドウが存在しません"); } } </script> <input type=button value="閉じる" onclick="closeWindow();">
window.open で開く場合は、その時に新しいウインドウのオブジェクトを取得できます。 さらに、新しいウインドウの見栄えもコントロールできます。 ( タブブラウザでも、新しいウインドウが開きます ) ▼ textField2 : : 拡張子:txtvbswsfjsphpjavahtmlutf8sjis <input type="button" onclick=' openObject = window.open( "html/win_control_02.htm", null, "height=400"+ ",width=400"+ ",status=yes"+ ",toolbar=no"+ ",menubar=no"+ ",location=no"+ ",top=0"+ ",left="+(screen.width-400-20) ); ' value="新しいウインドウを開く" > : <input type="button" value="閉じる" onClick="closeWindow();"> 開いたウインドウの記述 拡張子:txtvbswsfjsphpjavahtmlutf8sjis // ********************************************************* // このウインドウを開いたウインドウにアクセス // ********************************************************* function doAction( strValue ) { var opener = window.opener; opener.document.getElementsByName("textField2")[0].value = "データをセット"; }
window.open で開く場合は、その時に新しいウインドウのオブジェクトを取得できます。 さらに、新しいウインドウの見栄えもコントロールできます。 ( タブブラウザでも、新しいウインドウが開きます )
<input type="button" onclick=' openObject = window.open( "html/win_control_02.htm", null, "height=400"+ ",width=400"+ ",status=yes"+ ",toolbar=no"+ ",menubar=no"+ ",location=no"+ ",top=0"+ ",left="+(screen.width-400-20) ); ' value="新しいウインドウを開く" > : <input type="button" value="閉じる" onClick="closeWindow();">
// ********************************************************* // このウインドウを開いたウインドウにアクセス // ********************************************************* function doAction( strValue ) { var opener = window.opener; opener.document.getElementsByName("textField2")[0].value = "データをセット"; }
2014/06/16 昔 Opera がこの処理で動いていました。現在、Google Chrome が Modal Dialog が動作しないのでこの方法を試してみましたが、focus メソッドが動作しませんでした しかし、戻り値は返り、処理されているようです ※ 過去に Google Chrome は ModalDialog が動作していたはずです。 ※ 当時、Opera は ModalDialog が実装されていません。 こちら側の記述 拡張子:txtvbswsfjsphpjavahtmlutf8sjis function focusAction() { try { if ( !window.closed ) { openObject.focus(); } } catch( e ) { } } window.onfocus = focusAction window.onactivate = focusAction 開いたウインドウの記述 拡張子:txtvbswsfjsphpjavahtmlutf8sjis function blurAction() { window.opener.focus(); window.focus(); } window.onblur = blurAction; window.onactivate = blurAction;
昔 Opera がこの処理で動いていました。現在、Google Chrome が Modal Dialog が動作しないのでこの方法を試してみましたが、focus メソッドが動作しませんでした しかし、戻り値は返り、処理されているようです ※ 過去に Google Chrome は ModalDialog が動作していたはずです。 ※ 当時、Opera は ModalDialog が実装されていません。
function focusAction() { try { if ( !window.closed ) { openObject.focus(); } } catch( e ) { } } window.onfocus = focusAction window.onactivate = focusAction
function blurAction() { window.opener.focus(); window.focus(); } window.onblur = blurAction; window.onactivate = blurAction;
: ※ showModalDialog の第二引数は配列等も引渡しできます こちら側の記述 拡張子:txtvbswsfjsphpjavahtmlutf8sjis <input type="button" value="モーダルダイアログ" onClick="doModalDialog();"> <script type="text/javascript"> function doModalDialog() { var ret = window.showModalDialog( "html/win_control_03.htm" , window, "dialogWidth:600px;dialogHeight:500px;" ); alert(ret); } </SCRIPT> 開いたウインドウの記述 拡張子:txtvbswsfjsphpjavahtmlutf8sjis var dialogOpener; // ********************************************************* // このウインドウを開いたウインドウにアクセス // ********************************************************* function doAction( strValue ) { dialogOpener.document.getElementsByName("textField3")[0].value = "データをセット"; } // ********************************************************* // ロード時のイベント登録 // // 引数にセットされているこのウインドウを開いたウインドウ // のオブジェクトを保存する // ********************************************************* window.onload = function loadAction() { dialogOpener = window.dialogArguments; } // ********************************************************* // アンロード前のイベント登録 // // このダイアログの戻り値をセット // ********************************************************* window.onbeforeunload = function beforeunloadAction() { window.returnValue = "戻り値"; }
※ showModalDialog の第二引数は配列等も引渡しできます
<input type="button" value="モーダルダイアログ" onClick="doModalDialog();"> <script type="text/javascript"> function doModalDialog() { var ret = window.showModalDialog( "html/win_control_03.htm" , window, "dialogWidth:600px;dialogHeight:500px;" ); alert(ret); } </SCRIPT>
var dialogOpener; // ********************************************************* // このウインドウを開いたウインドウにアクセス // ********************************************************* function doAction( strValue ) { dialogOpener.document.getElementsByName("textField3")[0].value = "データをセット"; } // ********************************************************* // ロード時のイベント登録 // // 引数にセットされているこのウインドウを開いたウインドウ // のオブジェクトを保存する // ********************************************************* window.onload = function loadAction() { dialogOpener = window.dialogArguments; } // ********************************************************* // アンロード前のイベント登録 // // このダイアログの戻り値をセット // ********************************************************* window.onbeforeunload = function beforeunloadAction() { window.returnValue = "戻り値"; }
フォームを記述した URL をトップとしてダイアログに表示する場合には ダイアログのヘッド部に以下の記述を行います 拡張子:txtvbswsfjsphpjavahtmlutf8sjis <BASE target="_self"> トップにフレームを表示する場合はその必要はありません( 通常通り )
<BASE target="_self">
現状では、URL にユニークな文字列を加えて、なんらかの方法でページを再表示するのが確実です