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

回答編集履歴

2

ついき

2018/12/04 05:40

投稿

yambejp
yambejp

スコア118035

answer CHANGED
@@ -51,4 +51,5 @@
51
51
  ```
52
52
 
53
53
  ※わざわざchild.htmlを外部から持ってこなくても最初から包含しておいてもよい
54
- ※細かい挙動がめんどくさいのでjQueryで書きましたがピュアなjsでもかける
54
+ ※細かい挙動がめんどくさいのでjQueryで書きましたがピュアなjsでもかける
55
+ ※dialogタグは古いブラウザだときれいにでないのでcssなど指定が必要

1

sample

2018/12/04 05:40

投稿

yambejp
yambejp

スコア118035

answer CHANGED
@@ -3,4 +3,52 @@
3
3
  これって本当にchild.htmlというファイル名だけで指定していますか?
4
4
  http(s)・・・のようなURIで指定していませんか?
5
5
  別ドメインを指定するとchromeはopenerであっても値が戻せないようなので
6
- サーバー側のCORS対応が必要になります
6
+ サーバー側のCORS対応が必要になります
7
+
8
+ # sample
9
+ おもいきってajaxで処理するとかどうでしょう?
10
+ (ajaxなのでクロスドメインやローカルファイルはNG)
11
+
12
+ - parent.html
13
+ ```HTML
14
+ <html>
15
+ <head>
16
+ <meta charset="utf-8">
17
+ <title></title>
18
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
19
+ <script>
20
+ $(function(){
21
+ $('#openchild').on('click',function(e){
22
+ e.preventDefault();
23
+ $.ajax({
24
+ url:"child.html",
25
+ dataType:"html",
26
+ }).done(function(data){
27
+ $('body').append($('<dialog>').html(data).attr('open','on'));
28
+ });
29
+ });
30
+ $(document).on('click','#senddata',function(){
31
+ $('[name=parent_input]').val($("#inputText").val());
32
+ $(this).closest('dialog').remove();
33
+ });
34
+ });
35
+ </script>
36
+ </head>
37
+ <body>
38
+ <form name="parentfrm" action="" method="post">
39
+ <input type="text" class="form-control" name="parent_input" id="parent_input" value="" placeholder="ここに値がセットされます。" readonly>
40
+ </form>
41
+ <a href="#" id="openchild">子画面を開く</a>
42
+ </body>
43
+ </html>
44
+ ```
45
+ - child.html
46
+ ```HTML
47
+ <form>
48
+ <input type="text" name="sub_input" id="inputText" value="" class="form-control">
49
+ <input type="button" id="senddata" value="値を渡す">
50
+ </form>
51
+ ```
52
+
53
+ ※わざわざchild.htmlを外部から持ってこなくても最初から包含しておいてもよい
54
+ ※細かい挙動がめんどくさいのでjQueryで書きましたがピュアなjsでもかける