Q&A
エラーかなにか出てませんか？
子画面から親画面へのデータ受け渡しについて質問です。
以下のコードにて子画面のデータを親画面へ受け渡しをしているのですが
ブラウザのchromeだと何故か動作しません。
原因とコードの修正をお願いできないでしょうか？
※IE、Edge、FireFoxだと動作しました。
parent.html
<html lang="ja"> <head> <meta charset="utf-8"> <script> // 子ウィンドウを開く function openWindow() { window.open('child.html', 'child', 'width=500,height=250') } </script </head> <body> <form name="parentfrm" action="" method="post"> <input type="text" class="form-control" name="parent_input" value="" placeholder="ここに値がセットされます。"> </form> <a href="" onClick="openWindow()">子画面を開く</a> </body> </html>
child.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script type="text/javascript"> function setFormInput() { // 親ウィンドウの存在チェック if (!window.opener || window.opener.closed) { // 親ウィンドウが存在しない場合 window.alert('メインウィンドウが見当たりません。'); } else { window.opener.document.parentfrm.parent_input.value = document.getElementById("inputText").value; window.close(); } } </script> </head> <body> <form name="childfrm" action="" method="post"> <input type="text" name="sub_input" id="inputText" value="" class="form-control"> <input type="button" onclick="setFormInput()" value="値を渡す"> </form> </body> </html>
エラーですか？どうやって確認するのでしょうか？すいません。どう確認するのか解らない状態です
ブラウザ開発ツールのコンソール
エラーが出てました！「未知のDOMException：原点「null」のフレームがクロスオリジンフレームにアクセスできないようにブロックしました。」です。これが原因でしょうか？
何か解決策はございますか？
回答ちゃんと読んでください。きちんと「解決策」を書いています。
何処に書いてあるのでしょうか？？？
そんなに長い文章ではないですよ。これで何も伝わらないならそれ以上のコメントは厳しいです。コミュニケーションとれません。
mts10806さんはお答えしなくて結構です。ややこしくなるだけなので。
私の回答の「ローカルでfile://実行ではなく Webサーバー（ローカルサーバーでも可）で実行する のが簡単な回避策でしょうか。」を読んだ上で私の回答へコメントしたわけではなかったのですか。そうですか。それなら仕方ないですねー。
日本語もきちんと書けないみたいなので。こちらから遠慮します。
私の回答の「ローカルでfile://実行ではなく Webサーバー（ローカルサーバーでも可）で実行する のが簡単な回避策でしょうか。」を読んだ上で私の回答へコメントしたわけではなかったのですか。そうですか。それなら仕方ないですねー。
2度も同じ事書かなくて結構です。通報しました
伝わっていないようなので。どこにも「無理｣と書いていないにも関わらず回避策が書いてあるにも関わらず「無理」と判断されるような方なので念のためです。
あちらこちらに記述しないでください。行ったり来たりで何がなんだかさっぱりです。しかしながらサーバー上にて動作は確認できました。失言にも関わらず、一先ず有難うございました
あちらこちらにと言われましても、回答のコメントを見られないままだったのでこちらで指摘したまでです。流れは間違ってませんよ。
回答3件
ベストアンサー
一先ず、無理ということなのですね。有難うございました。
自己解決としてlocalStorageを使おうと思います。
今後の方の為に別途サンプルコードを記述しておきます。
無理と言う話はしてませんよ？
それにlocalStorageの使い方として微妙です。
あれは情報を保管するものであり渡すために使うものではありません。
Webサーバー上にて実行しても同じ現象でした・・。何が何やら？です
こちらでは再現しないのでなんとも。
何かしないといけない設定とかありますでしょうか？
逆にどういう環境下で実行しているか聞きたいですね。特に今回の現象対応のためにした設定はありませんし。
0
window.open('child.html', 'child', 'width=500,height=250')
これって本当にchild.htmlというファイル名だけで指定していますか？
http(s)・・・のようなURIで指定していませんか？
別ドメインを指定するとchromeはopenerであっても値が戻せないようなので
サーバー側のCORS対応が必要になります
sample
おもいきってajaxで処理するとかどうでしょう？
（ajaxなのでクロスドメインやローカルファイルはNG）
- parent.html
HTML
1<html> 2<head> 3<meta charset="utf-8"> 4<title></title> 5<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 6<script> 7$(function(){ 8 $('#openchild').on('click',function(e){ 9 e.preventDefault(); 10 $.ajax({ 11 url:"child.html", 12 dataType:"html", 13 }).done(function(data){ 14 $('body').append($('<dialog>').html(data).attr('open','on')); 15 }); 16 }); 17 $(document).on('click','#senddata',function(){ 18 $('[name=parent_input]').val($("#inputText").val()); 19 $(this).closest('dialog').remove(); 20 }); 21}); 22</script> 23</head> 24<body> 25<form name="parentfrm" action="" method="post"> 26<input type="text" class="form-control" name="parent_input" id="parent_input" value="" placeholder="ここに値がセットされます。" readonly> 27</form> 28<a href="#" id="openchild">子画面を開く</a> 29</body> 30</html>
- child.html
HTML
1<form> 2<input type="text" name="sub_input" id="inputText" value="" class="form-control"> 3<input type="button" id="senddata" value="値を渡す"> 4</form>
※わざわざchild.htmlを外部から持ってこなくても最初から包含しておいてもよい
※細かい挙動がめんどくさいのでjQueryで書きましたがピュアなjsでもかける
※dialogタグは古いブラウザだときれいにでないのでcssなど指定が必要
投稿2018/12/04 02:45
編集2018/12/04 05:40
総合スコア114784
テスト的なサンプルソースですのでchile.htmlで間違いありません。chormeだと上記の方の修正内容の様にエラーがブラウザ開発ツールのコンソールでエラーが出てしまいます。何か解決策はございませんでしょうか？
クロスドメインでなければ動きますけどね
すくなくとも私の環境では動いています
何か設定とかあるのでしょうか？
ローカル上に置いた単なるHTMLファイル２つだけなのですが・・。クロスドメインに引っかかるのでしょうか？？？
あ、ローカルなんですね、file://ベースでしか考えていませんか？
本番ではhttpベースでやる予定ならhttpでならエラーにならないと思いますよ。
もしくはご自身のPCに簡易httpdをいれるとか
サーバー上で試してみましたが特に変わりはありませんでした。Apache2.4.6を使っていますが何か設定しないといけない箇所でもあるのでしょうか？
window.localStorage.document.parentfrm.parent_input.value = document.getElementById("inputText").value;
の箇所でエラーが発生しています。
失礼しました。↑間違ったソースを記述してしまいました。
yambejp様、失礼しました。サーバー上にて動作確認できました。サーバー上では問題なく動作しました。
有難うございました
モーダルちっくな追加サンプルあげておきました
色々、有難うございます。助かります
0
回答者のお答えの中で正解ではないようなので、
コードの記述を削除しました。
投稿2018/12/04 03:06
編集2018/12/04 04:50退会済みユーザー
総合スコア0
この回答では今後の方のためになりません。
本来の解決策ではありません。
編集履歴から確認できるので実際に削除とはなっていませんし、削除依頼だしたとしても通る内容ではないです。低評価や指摘を受けたとしてもそのまま残された方が賢明かと。
なんでそんなに上から目線なの？
↑どうして「なの？」と上から目線なのでしょうか。
さすがにネチケットの指導からはしたくないですね。
あなたの回答
tips
プレビュー
