【JS・JQUERY】子画面の項目制御は、親画面から行うことは可能ですか？

前提・実現したいこと

親画面にて、ボタンをクリックすると、子画面を別ウィンドウで開きます。(window.open())
親画面側のJSで、子画面のボタンの表示/非表示や、活性非活性を記載したいです。
子画面では、検索等の処理を行っており、親画面から制御したい項目には、静的なボタンだけでなく動的なボタンも含みます。

試したこと

html
1<!DOCTYPE html>
2<html>
3	<head lang="ja">
4		<meta charset="UTF-8" />
5		<title>html1</title>
6		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
7	</head>
8	<body>
9		<button id="button1" onclick="openWindow()">button1</button>
10		<div id="loadHtml2"></div>
11		<script type="text/javascript">
12			function openWindow(){
13				test = window.open("./html2.html","test");
14				test.document.getElementById("button2").removeAttribute("disabled");
15			}
16			
17		</script>
18	</body>
19</html>

html
1<!DOCTYPE html>
2<html>
3<body>
4<button id="button2" disabled=disabled>button2</button>
5test
6</body>
7</html>

実現可能かどうか、参考サイトなどご教示いただけると幸いです。
(調べたところ、子画面⇒親画面の操作はできますが、親画面⇒子画面の操作はできないのかと思ってます。※window.open()のオプションにも指定できないようなので)

行動規範の内容に同意します

回答1件

ベストアンサー

結論から言えば可能です。
ですが、HelloWorld2さんのコードには１点問題があります。
Window.openした直後に、test.document.getElementById("button2").removeAttribute("disabled");が走ってしまう点です。
Window.openした直後は、まだ./html2.htmlのロードが終わっていません。
なので、test.document.getElementById("button2")を見つけることができないのです。
ここまでわかれば解決策は簡単で、test.addEventListenerでロードイベントを作ってやればいいです。
ちょうどこんな感じです。
http://yutamptech.com/index_log.html

でもコードを修正するのは、ちょっと待ってください！
いい人間と悪い人間が存在するように、コードにもいいコード、悪いコードがあります。
子ウィンドウのロードが終わる前に、ユーザーが親ウィンドウを閉じないと絶対にいいきれますか？
通常別の画面に値を渡したいときは、GETメソッドかPOSTメソッドを使います。
そもそも画面遷移でなく子ウィンドウをわざわざ作る必要本当にありますか？
大きなお世話だとおもいますが、本当に親ウィンドウから子ウィンドウを操作する必要があるか、考えてみてください。

投稿2019/07/29 11:59

yutampp

総合スコア182

HelloWorld2

2019/07/30 00:48

ご回答ありがとうございます。 yutamppさんにご教示いただいた方法で実現できました。本機能ですが、複数画面から共通で呼び出す画面があるのですが、それに対する、表示非表示や活性非活性の制御が画面ごとに異なり、その制御を、共通画面で行うより、各呼び出し元画面で行ったほうが「良いコード」かと思い、このような質問をいたしました。子ウィンドウを開くのは確定ですが、親画面から子ウィンドウを操作する必要があるかについては検討いたします。ありがとうございます。

行動規範の内容に同意します