teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問クロスドメインで表示させているiframe内の要素までスクロール

編集履歴

質問編集履歴

16

補足

2018/04/20 09:44

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -71,9 +71,11 @@
71
71
  }
72
72
 
73
73
  <script type="text/javascript">
74
+ jQuery(window).load(function(){
74
75
  jQuery('#button').on('click',function(){
75
76
  document.getElementById('fugapage').contentWindow.postMessage('hoge', '*');
76
77
  });
78
+ });
77
79
  </script>
78
80
 
79
81
  <iframe id="fugapage" src="iframeのURL"></iframe>
@@ -85,8 +87,8 @@
85
87
  <img src="xxx" id="hoge" border="0" alt="">
86
88
 
87
89
  <script type="text/javascript">
88
- window.addEventListener('message', function(event) {
90
+ window.addEventListener('message', function(event) {
89
- document.getElementById(event.data).scrollIntoView();
91
+ document.getElementById(event.data).scrollIntoView();
90
- }, false);
92
+ }, false);
91
93
  </script>
92
94
  ```

15

補足

2018/04/20 09:44

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -46,6 +46,7 @@
46
46
  -------------------------------------------------
47
47
 
48
48
  参考ソースを実装しました
49
+ PCでは動作しますが、現状スマートフォン(iPhone Safari)にて、実装できておりません。
49
50
 
50
51
  ■親ページ
51
52
  ```

14

補足

2018/04/20 09:42

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -70,21 +70,22 @@
70
70
  }
71
71
 
72
72
  <script type="text/javascript">
73
- window.addEventListener('message', function(event) {
73
+ jQuery('#button').on('click',function(){
74
- document.getElementById(event.data).scrollIntoView();
74
+ document.getElementById('fugapage').contentWindow.postMessage('hoge', '*');
75
- }, false);
75
+ });
76
76
  </script>
77
77
 
78
78
  <iframe id="fugapage" src="iframeのURL"></iframe>
79
79
  ```
80
+
80
81
  ■子ページ
81
82
  ```
82
83
  html
83
84
  <img src="xxx" id="hoge" border="0" alt="">
84
85
 
85
86
  <script type="text/javascript">
86
- jQuery('#button').on('click',function(){
87
+ window.addEventListener('message', function(event) {
87
- document.getElementById('fugapage').contentWindow.postMessage('hoge', '*');
88
+ document.getElementById(event.data).scrollIntoView();
88
- });
89
+ }, false);
89
90
  </script>
90
91
  ```

13

補足

2018/04/20 09:39

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -79,6 +79,7 @@
79
79
  ```
80
80
  ■子ページ
81
81
  ```
82
+ html
82
83
  <img src="xxx" id="hoge" border="0" alt="">
83
84
 
84
85
  <script type="text/javascript">

12

補足

2018/04/20 09:36

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -9,6 +9,9 @@
9
9
 
10
10
  ■親ページ
11
11
  ```
12
+
13
+
14
+ script
12
15
  <script type="text/javascript">
13
16
  window.addEventListener('message', function(e) {
14
17
  var iframe = jQuery("#fugapage");
@@ -46,6 +49,26 @@
46
49
 
47
50
  ■親ページ
48
51
  ```
52
+ html
53
+ <div id="button"></div>
54
+
55
+ css
56
+ #button {
57
+ position: fixed ;
58
+ bottom: 310px ;
59
+ right: -1px ;
60
+ width: 44px ;
61
+ height: 35px ;
62
+ padding: 2px 0;
63
+ z-index: 999 ;
64
+ font-size: 13px ;
65
+ border-radius: 5px 0 0 5px ;
66
+ line-height: 1.4 ;
67
+ color: #fff ;
68
+ background: #cc0000 ;
69
+ text-align: center ;
70
+ }
71
+
49
72
  <script type="text/javascript">
50
73
  window.addEventListener('message', function(event) {
51
74
  document.getElementById(event.data).scrollIntoView();
@@ -56,6 +79,8 @@
56
79
  ```
57
80
  ■子ページ
58
81
  ```
82
+ <img src="xxx" id="hoge" border="0" alt="">
83
+
59
84
  <script type="text/javascript">
60
85
  jQuery('#button').on('click',function(){
61
86
  document.getElementById('fugapage').contentWindow.postMessage('hoge', '*');

11

補足

2018/04/20 09:35

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -40,8 +40,10 @@
40
40
 
41
41
  よろしくお願い致します。
42
42
 
43
+ -------------------------------------------------
43
44
 
44
45
  参考ソースを実装しました
46
+
45
47
  ■親ページ
46
48
  ```
47
49
  <script type="text/javascript">

10

補足

2018/04/20 09:30

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -38,4 +38,25 @@
38
38
  子ページで指定要素の高さを取得して、それを親ページへ渡す方法がいいのでしょうか、、
39
39
  JS初心者なので行き詰まっております。
40
40
 
41
- よろしくお願い致します。
41
+ よろしくお願い致します。
42
+
43
+
44
+ 参考ソースを実装しました
45
+ ■親ページ
46
+ ```
47
+ <script type="text/javascript">
48
+ window.addEventListener('message', function(event) {
49
+ document.getElementById(event.data).scrollIntoView();
50
+ }, false);
51
+ </script>
52
+
53
+ <iframe id="fugapage" src="iframeのURL"></iframe>
54
+ ```
55
+ ■子ページ
56
+ ```
57
+ <script type="text/javascript">
58
+ jQuery('#button').on('click',function(){
59
+ document.getElementById('fugapage').contentWindow.postMessage('hoge', '*');
60
+ });
61
+ </script>
62
+ ```

9

質問の補足

2018/04/20 09:25

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -5,6 +5,7 @@
5
5
  ボタンはposition: fixed;で画面に追従するよう設置したいと考えています。
6
6
 
7
7
  iframeはスクロールバーなどはでない状態で、現状は下記の高さを自動調節する記述を入れています。
8
+ （普通の１枚ページのように下部へスクロールさせたいと考えています）
8
9
 
9
10
  ■親ページ
10
11
  ```

8

質問の補足入力

2018/04/20 09:14

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  親ページで子ページ(別サーバー上のiframe)を読み込んでいます。
4
4
  実装したい内容としましては、親ページにボタンを設置して、そのボタンをクリックで子ページの要素(<div id="hoge"></div>)まで上からスクロールさせたいと考えいます。
5
+ ボタンはposition: fixed;で画面に追従するよう設置したいと考えています。
6
+
5
7
  iframeはスクロールバーなどはでない状態で、現状は下記の高さを自動調節する記述を入れています。
6
8
 
7
9
  ■親ページ
@@ -33,6 +35,6 @@
33
35
  何かいい方法はあるのでしょうか？
34
36
 
35
37
  子ページで指定要素の高さを取得して、それを親ページへ渡す方法がいいのでしょうか、、
36
- JS初心者なので生き詰まっております。
38
+ JS初心者なので行き詰まっております。
37
39
 
38
40
  よろしくお願い致します。

7

子ページの要素を明確化

2018/04/20 09:08

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  楽天のスマートフォン商品ページのカスタマイズで行き詰っています。
2
2
 
3
3
  親ページで子ページ(別サーバー上のiframe)を読み込んでいます。
4
- 実装したい内容としましては、親ページにボタンを設置して、そのボタンをクリックで子ページの要素まで上からスクロールさせたいと考えいます。
4
+ 実装したい内容としましては、親ページにボタンを設置して、そのボタンをクリックで子ページの要素(<div id="hoge"></div>)まで上からスクロールさせたいと考えいます。
5
5
  iframeはスクロールバーなどはでない状態で、現状は下記の高さを自動調節する記述を入れています。
6
6
 
7
7
  ■親ページ

6

初心者アイコン追加

2018/04/20 02:29

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
File without changes

5

プロフラムコード編集

2018/04/20 02:28

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,8 @@
5
5
  iframeはスクロールバーなどはでない状態で、現状は下記の高さを自動調節する記述を入れています。
6
6
 
7
7
  ■親ページ
8
+ ```
8
- ```<script type="text/javascript">
9
+ <script type="text/javascript">
9
10
  window.addEventListener('message', function(e) {
10
11
  var iframe = jQuery("#fugapage");
11
12
  var eventName = e.data[0];
@@ -21,7 +22,8 @@
21
22
  <iframe id="fugapage" src="iframeのURL"></iframe>
22
23
  ```
23
24
  ■子ページ
25
+ ```
24
- ```<script type="text/javascript">
26
+ <script type="text/javascript">
25
27
  window.onload = function() {
26
28
  var height = document.getElementsByTagName("body")[0].scrollHeight;
27
29
  window.parent.postMessage(["setHeight", height], "*");

4

プログラムコード編集

2018/04/20 02:27

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -19,15 +19,15 @@
19
19
  </script>
20
20
 
21
21
  <iframe id="fugapage" src="iframeのURL"></iframe>
22
-
22
+ ```
23
23
  ■子ページ
24
- <script type="text/javascript">
24
+ ```<script type="text/javascript">
25
25
  window.onload = function() {
26
26
  var height = document.getElementsByTagName("body")[0].scrollHeight;
27
27
  window.parent.postMessage(["setHeight", height], "*");
28
28
  }
29
- </script>```
29
+ </script>
30
-
30
+ ```
31
31
  何かいい方法はあるのでしょうか？
32
32
 
33
33
  子ページで指定要素の高さを取得して、それを親ページへ渡す方法がいいのでしょうか、、

3

プログラムコード編集

2018/04/20 02:27

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -18,10 +18,10 @@
18
18
  }, false);
19
19
  </script>
20
20
 
21
- <iframe id="fugapage" src="iframeのURL"></iframe>```
21
+ <iframe id="fugapage" src="iframeのURL"></iframe>
22
22
 
23
23
  ■子ページ
24
- ```<script type="text/javascript">
24
+ <script type="text/javascript">
25
25
  window.onload = function() {
26
26
  var height = document.getElementsByTagName("body")[0].scrollHeight;
27
27
  window.parent.postMessage(["setHeight", height], "*");

2

プログラムコード編集

2018/04/20 02:25

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,7 @@
5
5
  iframeはスクロールバーなどはでない状態で、現状は下記の高さを自動調節する記述を入れています。
6
6
 
7
7
  ■親ページ
8
- <script type="text/javascript">
8
+ ```<script type="text/javascript">
9
9
  window.addEventListener('message', function(e) {
10
10
  var iframe = jQuery("#fugapage");
11
11
  var eventName = e.data[0];
@@ -18,15 +18,15 @@
18
18
  }, false);
19
19
  </script>
20
20
 
21
- <iframe id="fugapage" src="iframeのURL"></iframe>
21
+ <iframe id="fugapage" src="iframeのURL"></iframe>```
22
22
 
23
23
  ■子ページ
24
- <script type="text/javascript">
24
+ ```<script type="text/javascript">
25
25
  window.onload = function() {
26
26
  var height = document.getElementsByTagName("body")[0].scrollHeight;
27
27
  window.parent.postMessage(["setHeight", height], "*");
28
28
  }
29
- </script>
29
+ </script>```
30
30
 
31
31
  何かいい方法はあるのでしょうか？
32
32
 

1

タイトルの編集

2018/04/20 02:25

投稿

ysfree14
ysfree14

スコア19

title CHANGED
@@ -1,1 +1,1 @@
1
- クロスドメインのiframe内のコンテンツの要素までスクロール
1
+ クロスドメインで表示させているiframe内の要素までスクロール
body CHANGED
File without changes