Q&A
質問
中継ウィンドウから提供された関数を経由して、メインウィンドウからサブウィンドウを操作したい(close, focus)のですがうまくいきません。
うまくいかない原因と解決策を教えていただけると幸いです。
試したこと
- 試しにメインページに
close2を追加(#1)し、直接サブウィンドウオブジェクトからcloseを実行したとき、正常に操作できた - 中継ウィンドウの中継ページの
#2をグレーアウトすると、正常に操作できるclose,focus - chrome と ie では正常に動作しなかったが、firefoxでは動作した
前提条件
メインウィンドウ
- サブウィンドウを操作する機能をもつ
- メインページは都合により実装を変更できない
中継ウィンドウ
- 必ず呼び出し元のウィンドウが存在する
- サブウィンドウを操作する機能のロジックを保持する
-- 呼び出し元にその機能を提供する
-- 下記のサンプルコードにはないが、サブウィンドウに表示するページを切り替える機能を保持する
サブウィンドウ
- 普通のwebページ
- 複数のURLが存在する
メインウィンドウ
<!-- メインページ --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>main</title> <script> let dispatcher; document.addEventListener('DOMContentLoaded', function () { document.querySelector('#open').addEventListener('click', function () { window.open('dispatcher.html', 'dispatcher'); }); document.querySelector('#close').addEventListener('click', function () { dispatcher.close(); }); document.querySelector('#focus').addEventListener('click', function () { dispatcher.focus(); }); <!-- #1 このコードは追加できないが、subwindowオブジェクトを直接操作できるか試してみる --> document.querySelector('#close2').addEventListener('click', function () { dispatcher.getSubWindow().close(); }); }); function setDispatcherWinObj(obj) { dispatcher = obj; } </script> </head> <body> <h1>main</h1> <button type="button" id="open">open</button> <button type="button" id="close">close</button> <button type="button" id="focus">focus</button> <button type="button" id="close2">close2</button> </body> </html>
中継ウィンドウ
<!-- 中継ページ --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dispatcher</title> </head> <body> <script> const dispatcher = { global: window, subGlobal: null, open: function () { this.subGlobal = this.global.open('sub.html', 'sub'); }, close: function () { // "this.subGlobal.close;" はNG this.subGlobal.close(); }, focus: function () { this.subGlobal.focus(); }, getSubWindow: function () { return this.subGlobal; } }; <!-- 中継ページはサブページ表示後にクローズし、サブページの管理機能を呼び出し元に持たせる --> window.opener.setDispatcherWinObj(dispatcher); dispatcher.open(); window.close(); <!-- #2 中継ページはサブページ表示後にクローズし、サブページの管理機能を呼び出し元に持たせる --> </script> </body> </html>
サブウィンドウ
<!-- サブページ --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sub</title> </head> <body> <h1>sub</h1> </body> </html>
あなたの回答
tips
プレビュー
