teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問postmassageで子から親へ複数の値を渡す

編集履歴

質問編集履歴

5

コード訂正

2018/04/27 09:15

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -18,7 +18,7 @@
18
18
  var height = document.getElementsByTagName("body")[0].scrollHeight;
19
19
  window.parent.postMessage(["setHeight", height], "*");
20
20
 
21
- //ページ上からitem-fbまでの距離を取得
21
+ //ページ上からhogeまでの距離を取得
22
22
  var clientRect = document.getElementById("hoge").getBoundingClientRect() ;
23
23
  var scroll = clientRect.top ;
24
24
  window.parent.postMessage(['scroll', scroll], "*");

4

コード修正

2018/04/27 09:15

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -12,31 +12,37 @@
12
12
 
13
13
  JS
14
14
  <script>
15
- window.onload = function() {
15
+ window.onload = function() {
16
16
 
17
- //高さを取得
17
+ //高さを取得
18
- var height = document.getElementsByTagName("body")[0].scrollHeight;
18
+ var height = document.getElementsByTagName("body")[0].scrollHeight;
19
- window.parent.postMessage(["setHeight", height], "*");
19
+ window.parent.postMessage(["setHeight", height], "*");
20
20
 
21
- //ページ上からhogeまでの距離を取得
21
+ //ページ上からitem-fbまでの距離を取得
22
- var clientRect = document.getElementById("hoge").getBoundingClientRect() ;
22
+ var clientRect = document.getElementById("hoge").getBoundingClientRect() ;
23
- var scroll = clientRect.top ;
23
+ var scroll = clientRect.top ;
24
- window.parent.postMessage(scroll, "*");
24
+ window.parent.postMessage(['scroll', scroll], "*");
25
25
 
26
- }
26
+ }
27
27
  </script>
28
28
  ```
29
29
 
30
30
  ■親
31
31
  ```
32
32
  html
33
- <div id="ifrmae-wrap">
33
+ <div id="fugapage">
34
- <iframe src="iframeのソース" frameborder="0" width="100%" height="100%"></iframe>
34
+ <iframe src="iframeのソース" frameborder="0" width="100%" height="100%" id="fugapage-frame"></iframe>
35
35
  </div>
36
36
 
37
+ <div id="button"></div>
38
+
37
39
  JS
38
40
  <script>
41
+ var src = jQuery("#fugapage-frame").attr("src");
42
+ 　　　　jQuery("#fugapage-frame").attr("src","");
43
+ 　　　　jQuery("#fugapage-frame").attr("src",src);
44
+
39
- window.addEventListener('message', function(e) {
45
+ window.addEventListener('message', function(e) {
40
46
  var iframe = jQuery("#fugapage");
41
47
  var eventName = e.data[0];
42
48
  var data = e.data[1];
@@ -47,10 +53,10 @@
47
53
  case 'scroll':
48
54
  jQuery('#button').on('click',function(){
49
55
  var scrollHeight = e.data[1];
50
- var frameTop = jQuery('#iframe').offset();
56
+ var frameoff = jQuery('#fugapage').offset();
51
- var _frameTop = frameoff.top;
57
+ var _frameoff = frameoff.top;
52
- var total = _frameTop + scrollHeight;
58
+ var total = _frameoff + scrollHeight;
53
- jQuery("html,body").animate({scrollTop:total});
59
+ jQuery("html,body").animate({scrollTop:total - 120});
54
60
  });
55
61
  }
56
62
  }, false);

3

記述追加

2018/04/27 09:13

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -36,17 +36,24 @@
36
36
 
37
37
  JS
38
38
  <script>
39
- //iframeの高さを調整
40
39
  window.addEventListener('message', function(e) {
41
- var iframe = jQuery("#iframe-wrap");
40
+ var iframe = jQuery("#fugapage");
42
- var eventName = e.data[0];
41
+ var eventName = e.data[0];
43
- var data = e.data[1];
42
+ var data = e.data[1];
44
- switch(eventName) {
43
+ switch(eventName) {
45
- case 'setHeight':
44
+ case 'setHeight':
46
- iframe.height(data);
45
+ iframe.height(data);
47
- break;
46
+ break;
47
+ case 'scroll':
48
+ jQuery('#button').on('click',function(){
49
+ var scrollHeight = e.data[1];
50
+ var frameTop = jQuery('#iframe').offset();
51
+ var _frameTop = frameoff.top;
52
+ var total = _frameTop + scrollHeight;
53
+ jQuery("html,body").animate({scrollTop:total});
54
+ });
48
- }
55
+ }
49
- }, false);
56
+ }, false);
50
57
  </script>
51
58
  ```
52
59
  よろしくお願い致します。

2

html追記

2018/04/27 05:28

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -7,7 +7,11 @@
7
7
 
8
8
  ■子
9
9
  ```
10
+ html
11
+ <p id="hoge"><img src="" alt=""></p>
10
12
 
13
+ JS
14
+ <script>
11
15
  window.onload = function() {
12
16
 
13
17
  //高さを取得
@@ -20,14 +24,21 @@
20
24
  window.parent.postMessage(scroll, "*");
21
25
 
22
26
  }
27
+ </script>
23
28
  ```
24
29
 
25
30
  ■親
26
31
  ```
32
+ html
33
+ <div id="ifrmae-wrap">
34
+ <iframe src="iframeのソース" frameborder="0" width="100%" height="100%"></iframe>
35
+ </div>
36
+
37
+ JS
27
38
  <script>
28
39
  //iframeの高さを調整
29
40
  window.addEventListener('message', function(e) {
30
- var iframe = jQuery("iframeのID");
41
+ var iframe = jQuery("#iframe-wrap");
31
42
  var eventName = e.data[0];
32
43
  var data = e.data[1];
33
44
  switch(eventName) {

1

表示修正

2018/04/26 09:19

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,8 @@
6
6
  親側にどのように記載すればいいのか分からない状況です。
7
7
 
8
8
  ■子
9
- ,,,
9
+ ```
10
+
10
11
  window.onload = function() {
11
12
 
12
13
  //高さを取得
@@ -19,10 +20,10 @@
19
20
  window.parent.postMessage(scroll, "*");
20
21
 
21
22
  }
22
- ,,,
23
+ ```
23
24
 
24
25
  ■親
25
- ,,,
26
+ ```
26
27
  <script>
27
28
  //iframeの高さを調整
28
29
  window.addEventListener('message', function(e) {
@@ -36,5 +37,5 @@
36
37
  }
37
38
  }, false);
38
39
  </script>
39
-
40
+ ```
40
41
  よろしくお願い致します。