回答編集履歴

2

ついき

2018/12/04 05:40

投稿

yambejp
yambejp

スコア114821

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

1

sample

2018/12/04 05:40

投稿

yambejp
yambejp

スコア114821

test CHANGED
@@ -9,3 +9,99 @@
9
9
  別ドメインを指定するとchromeはopenerであっても値が戻せないようなので
10
10
 
11
11
  サーバー側のCORS対応が必要になります
12
+
13
+
14
+
15
+ # sample
16
+
17
+ おもいきってajaxで処理するとかどうでしょう?
18
+
19
+ (ajaxなのでクロスドメインやローカルファイルはNG)
20
+
21
+
22
+
23
+ - parent.html
24
+
25
+ ```HTML
26
+
27
+ <html>
28
+
29
+ <head>
30
+
31
+ <meta charset="utf-8">
32
+
33
+ <title></title>
34
+
35
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
36
+
37
+ <script>
38
+
39
+ $(function(){
40
+
41
+ $('#openchild').on('click',function(e){
42
+
43
+ e.preventDefault();
44
+
45
+ $.ajax({
46
+
47
+ url:"child.html",
48
+
49
+ dataType:"html",
50
+
51
+ }).done(function(data){
52
+
53
+ $('body').append($('<dialog>').html(data).attr('open','on'));
54
+
55
+ });
56
+
57
+ });
58
+
59
+ $(document).on('click','#senddata',function(){
60
+
61
+ $('[name=parent_input]').val($("#inputText").val());
62
+
63
+ $(this).closest('dialog').remove();
64
+
65
+ });
66
+
67
+ });
68
+
69
+ </script>
70
+
71
+ </head>
72
+
73
+ <body>
74
+
75
+ <form name="parentfrm" action="" method="post">
76
+
77
+ <input type="text" class="form-control" name="parent_input" id="parent_input" value="" placeholder="ここに値がセットされます。" readonly>
78
+
79
+ </form>
80
+
81
+ <a href="#" id="openchild">子画面を開く</a>
82
+
83
+ </body>
84
+
85
+ </html>
86
+
87
+ ```
88
+
89
+ - child.html
90
+
91
+ ```HTML
92
+
93
+ <form>
94
+
95
+ <input type="text" name="sub_input" id="inputText" value="" class="form-control">
96
+
97
+ <input type="button" id="senddata" value="値を渡す">
98
+
99
+ </form>
100
+
101
+ ```
102
+
103
+
104
+
105
+ ※わざわざchild.htmlを外部から持ってこなくても最初から包含しておいてもよい
106
+
107
+ ※細かい挙動がめんどくさいのでjQueryで書きましたがピュアなjsでもかける