回答率: 85.31%

質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう

ただいま回答率: 85.31%

トップ JavaScriptに関する質問

Q&A

解決済

3回答

5621閲覧

子画面から親画面へのデータ受け渡しについて

退会済みユーザー

総合スコア0

1グッド

0クリップ

投稿2018/12/04 01:12

1

0

子画面から親画面へのデータ受け渡しについて質問です。
以下のコードにて子画面のデータを親画面へ受け渡しをしているのですが
ブラウザの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>

2018/12/04 01:50

エラーかなにか出てませんか？

退会済みユーザー

2018/12/04 02:01

エラーですか？どうやって確認するのでしょうか？すいません。どう確認するのか解らない状態です

2018/12/04 02:02

ブラウザ開発ツールのコンソール

退会済みユーザー

2018/12/04 02:11

エラーが出てました！「未知のDOMException：原点「null」のフレームがクロスオリジンフレームにアクセスできないようにブロックしました。」です。これが原因でしょうか？

退会済みユーザー

2018/12/04 02:15

何か解決策はございますか？

2018/12/04 03:50

回答ちゃんと読んでください。きちんと「解決策」を書いています。

退会済みユーザー

2018/12/04 04:48

何処に書いてあるのでしょうか？？？

2018/12/04 05:45 編集

そんなに長い文章ではないですよ。これで何も伝わらないならそれ以上のコメントは厳しいです。コミュニケーションとれません。

退会済みユーザー

2018/12/04 04:52

mts10806さんはお答えしなくて結構です。ややこしくなるだけなので。

2018/12/04 04:54 編集

私の回答の「ローカルでfile://実行ではなく Webサーバー（ローカルサーバーでも可）で実行する　のが簡単な回避策でしょうか。」を読んだ上で私の回答へコメントしたわけではなかったのですか。そうですか。それなら仕方ないですねー。

退会済みユーザー

2018/12/04 04:54

日本語もきちんと書けないみたいなので。こちらから遠慮します。

2018/12/04 04:54

私の回答の「ローカルでfile://実行ではなく Webサーバー（ローカルサーバーでも可）で実行する　のが簡単な回避策でしょうか。」を読んだ上で私の回答へコメントしたわけではなかったのですか。そうですか。それなら仕方ないですねー。

退会済みユーザー

2018/12/04 05:00

2度も同じ事書かなくて結構です。通報しました

2018/12/04 05:02 編集

伝わっていないようなので。どこにも「無理｣と書いていないにも関わらず回避策が書いてあるにも関わらず「無理」と判断されるような方なので念のためです。

退会済みユーザー

2018/12/04 05:38

あちらこちらに記述しないでください。行ったり来たりで何がなんだかさっぱりです。しかしながらサーバー上にて動作は確認できました。失言にも関わらず、一先ず有難うございました

2018/12/04 05:43

あちらこちらにと言われましても、回答のコメントを見られないままだったのでこちらで指摘したまでです。流れは間違ってませんよ。

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

回答3件

0

ベストアンサー

クロスドメイン制約というものに引っかかっています（現在のところChrome特有の問題です）

上記の記事にも色々書いてはありますが、ひとまずローカルでfile://実行ではなく
Webサーバー（ローカルサーバーでも可）で実行する　のが簡単な回避策でしょうか。
コードが間違っているわけではないので、あくまで実行する環境の問題ですね。

投稿2018/12/04 02:55

総合スコア80888

退会済みユーザー

2018/12/04 03:02

一先ず、無理ということなのですね。有難うございました。自己解決としてlocalStorageを使おうと思います。今後の方の為に別途サンプルコードを記述しておきます。

2018/12/04 03:50 編集

無理と言う話はしてませんよ？それにlocalStorageの使い方として微妙です。あれは情報を保管するものであり渡すために使うものではありません。

退会済みユーザー

2018/12/04 04:35

Webサーバー上にて実行しても同じ現象でした・・。何が何やら？です

2018/12/04 04:39

こちらでは再現しないのでなんとも。

退会済みユーザー

2018/12/04 04:41

何かしないといけない設定とかありますでしょうか？

2018/12/04 04:44

逆にどういう環境下で実行しているか聞きたいですね。特に今回の現象対応のためにした設定はありませんし。

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

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

総合スコア117726

退会済みユーザー

2018/12/04 02:51

テスト的なサンプルソースですのでchile.htmlで間違いありません。chormeだと上記の方の修正内容の様にエラーがブラウザ開発ツールのコンソールでエラーが出てしまいます。何か解決策はございませんでしょうか？

2018/12/04 03:27

クロスドメインでなければ動きますけどねすくなくとも私の環境では動いています

退会済みユーザー

2018/12/04 04:21

何か設定とかあるのでしょうか？

退会済みユーザー

2018/12/04 04:31

ローカル上に置いた単なるHTMLファイル２つだけなのですが・・。クロスドメインに引っかかるのでしょうか？？？

2018/12/04 04:52

あ、ローカルなんですね、file://ベースでしか考えていませんか？本番ではhttpベースでやる予定ならhttpでならエラーにならないと思いますよ。もしくはご自身のPCに簡易httpdをいれるとか

退会済みユーザー

2018/12/04 05:05

サーバー上で試してみましたが特に変わりはありませんでした。Apache2.4.6を使っていますが何か設定しないといけない箇所でもあるのでしょうか？

退会済みユーザー

2018/12/04 05:20

window.localStorage.document.parentfrm.parent_input.value = document.getElementById("inputText").value; の箇所でエラーが発生しています。

退会済みユーザー

2018/12/04 05:21

失礼しました。↑間違ったソースを記述してしまいました。

退会済みユーザー

2018/12/04 05:26

yambejp様、失礼しました。サーバー上にて動作確認できました。サーバー上では問題なく動作しました。有難うございました

2018/12/04 05:43

モーダルちっくな追加サンプルあげておきました

退会済みユーザー

2018/12/04 05:51

色々、有難うございます。助かります

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

0

回答者のお答えの中で正解ではないようなので、
コードの記述を削除しました。

投稿2018/12/04 03:06

編集2018/12/04 04:50

退会済みユーザー

総合スコア0

2018/12/04 03:51

この回答では今後の方のためになりません。本来の解決策ではありません。

2018/12/04 04:52

編集履歴から確認できるので実際に削除とはなっていませんし、削除依頼だしたとしても通る内容ではないです。低評価や指摘を受けたとしてもそのまま残された方が賢明かと。

退会済みユーザー

2018/12/04 05:01

なんでそんなに上から目線なの？

2018/12/04 05:03

↑どうして「なの？」と上から目線なのでしょうか。さすがにネチケットの指導からはしたくないですね。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ JavaScriptに関する質問

子画面から親画面へのデータ受け渡しについて

関連した質問

同じタグがついた質問を見る

運営からのお知らせ

【SNS認証機能に関する障害発生のお知らせ】現在、SNSを利用した認証機能において断続的な障害が発生しており、SNSログインおよび新規登録が行えない事象を確認しております。 X(旧Twitter) APIの障害による可能性がございますため、復旧までお待ちいただきますよう、よろしくお願いいたします。ご不便ご迷惑をおかけし、誠に申し訳ございません。なおメールアドレスでのログインおよび新規登録は通常通りご利用いただけますので、メールアドレスでの認証をお試しください。

過去のお知らせを見る