Q&A
Test01.jsのコードに問題があり提示されたエラーが発生しません。正しく問題が発生するコードに書き換えてください。
前提・実現したいこと
JavaScriptを使って
「親ウインドウ→子ウインドウ→親ウインドウ」という流れで値を渡す処理を行いたいのですがうまくいきません。
親ウインドウで入力した値を子ウインドウで表示させ、その値を親ウインドウに再度渡すという処理です。
最終的に親ウインドウで値を表示させることはできるのですが、
その値が子ウインドウで表示されません。
発生している問題・エラーメッセージ
該当ソースコードの部分で以下のエラーが出ています。
JavaScript
1//エラー箇所 2var obj_window = window.open("Test2.html", "テスト2","width=200,height=300");
//エラー内容 Unable to set property 'value' of undefined or null reference
該当のソースコード
HTML
1<!--Test1.html--> 2<!DOCTYPE HTML> 3<html> 4<head> 5<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 6<title>Test1</title> 7<script type="text/javascript" src="Test01.js"></script> 8</head> 9<body> 10 <input type="text" id="i1"/> 11 <button id="btn" onclick='func()'>子ウインドウに渡す</button><p id="s"></p> 12</body> 13</html>
HTML
1<!--Test2.html--> 2<!DOCTYPE HTML> 3<html> 4<head> 5<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 6<title>Test2</title> 7<script type="text/javascript" src="Test02.js"></script> 8</head> 9<body> 10 <div> 11 <input type="text" id="i2" /> 12 <button id="btn2" onclick="func2();">親ウインドウに戻す</button> 13 </div> 14</body> 15</html> 16
JavaScript
1//Test01.js 2function func() { 3 var obj_window = window.open("Test2.html", "Test2","width=300,height=200"); 4 sub.document.getElementById("i2").value = document.getElementById("i1").value; 5}
JavaScript
1//Test02.js 2function func2() { 3 //子ウインドウの初期値の設定 4 document.getElementById("i2").value = window.opener.document.getElementById("i1").value; 5 //親ウインドウに値を渡す 6 window.opener.document.getElementById("s").innerHTML = document.getElementById("i2").value; 7 window.close(); 8}
補足情報（FW/ツールのバージョンなど）
動作確認はMicrosoft Edgeを使っています。
回答2件
0
汎用的にやるならsetIntervalで処理する感じですね
投稿2020/05/13 01:41
総合スコア116734
//Test1.html
<script>
function func() {
var obj_window = window.open("Test2.html", "Test2","width=300,height=200");
var timerId=setInterval(function()>{
if(obj_window.document.getElementById("i2")){
obj_window.document.getElementById("i2").value = self.document.getElementById("i1").value;
clearInterval(timerId);
}
},1);
}
</script>
<input type="text" id="i1" value="a" />
<button id="btn" onclick='func()' type="button">子ウインドウに渡す</button><p id="s"></p>
//Test2.html
<script>
function func2() {
opener.document.getElementById("s").innerHTML = document.getElementById("i2").value;
self.close();
}
</script>
<div>
<input type="text" id="i2" value="b" />
<button id="btn2" onclick="func2();">親ウインドウに戻す</button>
</div>
0
ベストアンサー
ウインドウが開き終わる前に子ウインドウに値を表示しようとしているため、値を子ウインドウで表示するのに失敗しています。
ウインドウの読み込み完了時に値を表示するようにしてみてください。
javascript
1var obj_window = window.open("Test2.html", "Test2","width=300,height=200"); 2obj_window.addEventListener("load", function() { 3 obj_window.document.getElementById("i2").value = document.getElementById("i1").value; 4});
投稿2020/05/13 01:21
総合スコア4524
Edgeは子ウィンドウのloadイベントを拾えないかもしれません
（私の環境では無理でした）
私の環境では拾えましたが、マルチブラウザ対応などを考えてもsetTimeoutなどのほうが多くの環境でうまく動きそうですね。
あなたの回答
tips
プレビュー
