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

編集履歴

質問編集履歴

16

補足

2018/04/20 09:44

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -144,11 +144,15 @@
144
144
 
145
145
  <script type="text/javascript">
146
146
 
147
+ jQuery(window).load(function(){
148
+
147
149
  jQuery('#button').on('click',function(){
148
150
 
149
151
  document.getElementById('fugapage').contentWindow.postMessage('hoge', '*');
150
152
 
151
153
  });
154
+
155
+ });
152
156
 
153
157
  </script>
154
158
 
@@ -172,11 +176,11 @@
172
176
 
173
177
  <script type="text/javascript">
174
178
 
175
- window.addEventListener('message', function(event) {
179
+ window.addEventListener('message', function(event) {
176
180
 
177
- document.getElementById(event.data).scrollIntoView();
181
+ document.getElementById(event.data).scrollIntoView();
178
182
 
179
- }, false);
183
+ }, false);
180
184
 
181
185
  </script>
182
186
 

15

補足

2018/04/20 09:44

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -94,6 +94,8 @@
94
94
 
95
95
  参考ソースを実装しました
96
96
 
97
+ PCでは動作しますが、現状スマートフォン(iPhone Safari)にて、実装できておりません。
98
+
97
99
 
98
100
 
99
101
  ■親ページ

14

補足

2018/04/20 09:42

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -142,11 +142,11 @@
142
142
 
143
143
  <script type="text/javascript">
144
144
 
145
- window.addEventListener('message', function(event) {
145
+ jQuery('#button').on('click',function(){
146
146
 
147
- document.getElementById(event.data).scrollIntoView();
147
+ document.getElementById('fugapage').contentWindow.postMessage('hoge', '*');
148
148
 
149
- }, false);
149
+ });
150
150
 
151
151
  </script>
152
152
 
@@ -155,6 +155,8 @@
155
155
  <iframe id="fugapage" src="iframeのURL"></iframe>
156
156
 
157
157
  ```
158
+
159
+
158
160
 
159
161
  ■子ページ
160
162
 
@@ -168,11 +170,11 @@
168
170
 
169
171
  <script type="text/javascript">
170
172
 
171
- jQuery('#button').on('click',function(){
173
+ window.addEventListener('message', function(event) {
172
174
 
173
- document.getElementById('fugapage').contentWindow.postMessage('hoge', '*');
175
+ document.getElementById(event.data).scrollIntoView();
174
176
 
175
- });
177
+ }, false);
176
178
 
177
179
  </script>
178
180
 

13

補足

2018/04/20 09:39

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -160,6 +160,8 @@
160
160
 
161
161
  ```
162
162
 
163
+ html
164
+
163
165
  <img src="xxx" id="hoge" border="0" alt="">
164
166
 
165
167
 

12

補足

2018/04/20 09:36

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -19,6 +19,12 @@
19
19
  ■親ページ
20
20
 
21
21
  ```
22
+
23
+
24
+
25
+
26
+
27
+ script
22
28
 
23
29
  <script type="text/javascript">
24
30
 
@@ -94,6 +100,46 @@
94
100
 
95
101
  ```
96
102
 
103
+ html
104
+
105
+ <div id="button"></div>
106
+
107
+
108
+
109
+ css
110
+
111
+ #button {
112
+
113
+ position: fixed ;
114
+
115
+ bottom: 310px ;
116
+
117
+ right: -1px ;
118
+
119
+ width: 44px ;
120
+
121
+ height: 35px ;
122
+
123
+ padding: 2px 0;
124
+
125
+ z-index: 999 ;
126
+
127
+ font-size: 13px ;
128
+
129
+ border-radius: 5px 0 0 5px ;
130
+
131
+ line-height: 1.4 ;
132
+
133
+ color: #fff ;
134
+
135
+ background: #cc0000 ;
136
+
137
+ text-align: center ;
138
+
139
+ }
140
+
141
+
142
+
97
143
  <script type="text/javascript">
98
144
 
99
145
  window.addEventListener('message', function(event) {
@@ -114,6 +160,10 @@
114
160
 
115
161
  ```
116
162
 
163
+ <img src="xxx" id="hoge" border="0" alt="">
164
+
165
+
166
+
117
167
  <script type="text/javascript">
118
168
 
119
169
  jQuery('#button').on('click',function(){

11

補足

2018/04/20 09:35

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -82,9 +82,13 @@
82
82
 
83
83
 
84
84
 
85
+ -------------------------------------------------
86
+
85
87
 
86
88
 
87
89
  参考ソースを実装しました
90
+
91
+
88
92
 
89
93
  ■親ページ
90
94
 

10

補足

2018/04/20 09:30

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -79,3 +79,45 @@
79
79
 
80
80
 
81
81
  よろしくお願い致します。
82
+
83
+
84
+
85
+
86
+
87
+ 参考ソースを実装しました
88
+
89
+ ■親ページ
90
+
91
+ ```
92
+
93
+ <script type="text/javascript">
94
+
95
+ window.addEventListener('message', function(event) {
96
+
97
+ document.getElementById(event.data).scrollIntoView();
98
+
99
+ }, false);
100
+
101
+ </script>
102
+
103
+
104
+
105
+ <iframe id="fugapage" src="iframeのURL"></iframe>
106
+
107
+ ```
108
+
109
+ ■子ページ
110
+
111
+ ```
112
+
113
+ <script type="text/javascript">
114
+
115
+ jQuery('#button').on('click',function(){
116
+
117
+ document.getElementById('fugapage').contentWindow.postMessage('hoge', '*');
118
+
119
+ });
120
+
121
+ </script>
122
+
123
+ ```

9

質問の補足

2018/04/20 09:25

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -11,6 +11,8 @@
11
11
 
12
12
 
13
13
  iframeはスクロールバーなどはでない状態で、現状は下記の高さを自動調節する記述を入れています。
14
+
15
+ （普通の１枚ページのように下部へスクロールさせたいと考えています）
14
16
 
15
17
 
16
18
 

8

質問の補足入力

2018/04/20 09:14

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -5,6 +5,10 @@
5
5
  親ページで子ページ(別サーバー上のiframe)を読み込んでいます。
6
6
 
7
7
  実装したい内容としましては、親ページにボタンを設置して、そのボタンをクリックで子ページの要素(<div id="hoge"></div>)まで上からスクロールさせたいと考えいます。
8
+
9
+ ボタンはposition: fixed;で画面に追従するよう設置したいと考えています。
10
+
11
+
8
12
 
9
13
  iframeはスクロールバーなどはでない状態で、現状は下記の高さを自動調節する記述を入れています。
10
14
 
@@ -68,7 +72,7 @@
68
72
 
69
73
  子ページで指定要素の高さを取得して、それを親ページへ渡す方法がいいのでしょうか、、
70
74
 
71
- JS初心者なので生き詰まっております。
75
+ JS初心者なので行き詰まっております。
72
76
 
73
77
 
74
78
 

7

子ページの要素を明確化

2018/04/20 09:08

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  親ページで子ページ(別サーバー上のiframe)を読み込んでいます。
6
6
 
7
- 実装したい内容としましては、親ページにボタンを設置して、そのボタンをクリックで子ページの要素まで上からスクロールさせたいと考えいます。
7
+ 実装したい内容としましては、親ページにボタンを設置して、そのボタンをクリックで子ページの要素(<div id="hoge"></div>)まで上からスクロールさせたいと考えいます。
8
8
 
9
9
  iframeはスクロールバーなどはでない状態で、現状は下記の高さを自動調節する記述を入れています。
10
10
 

6

初心者アイコン追加

2018/04/20 02:29

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
File without changes

5

プロフラムコード編集

2018/04/20 02:28

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,9 @@
12
12
 
13
13
  ■親ページ
14
14
 
15
+ ```
16
+
15
- ```<script type="text/javascript">
17
+ <script type="text/javascript">
16
18
 
17
19
  window.addEventListener('message', function(e) {
18
20
 
@@ -44,7 +46,9 @@
44
46
 
45
47
  ■子ページ
46
48
 
49
+ ```
50
+
47
- ```<script type="text/javascript">
51
+ <script type="text/javascript">
48
52
 
49
53
  window.onload = function() {
50
54
 

4

プログラムコード編集

2018/04/20 02:27

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -40,11 +40,11 @@
40
40
 
41
41
  <iframe id="fugapage" src="iframeのURL"></iframe>
42
42
 
43
-
43
+ ```
44
44
 
45
45
  ■子ページ
46
46
 
47
- <script type="text/javascript">
47
+ ```<script type="text/javascript">
48
48
 
49
49
  window.onload = function() {
50
50
 
@@ -54,9 +54,9 @@
54
54
 
55
55
  }
56
56
 
57
- </script>```
57
+ </script>
58
58
 
59
-
59
+ ```
60
60
 
61
61
  何かいい方法はあるのでしょうか？
62
62
 

3

プログラムコード編集

2018/04/20 02:27

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -38,13 +38,13 @@
38
38
 
39
39
 
40
40
 
41
- <iframe id="fugapage" src="iframeのURL"></iframe>```
41
+ <iframe id="fugapage" src="iframeのURL"></iframe>
42
42
 
43
43
 
44
44
 
45
45
  ■子ページ
46
46
 
47
- ```<script type="text/javascript">
47
+ <script type="text/javascript">
48
48
 
49
49
  window.onload = function() {
50
50
 

2

プログラムコード編集

2018/04/20 02:25

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ■親ページ
14
14
 
15
- <script type="text/javascript">
15
+ ```<script type="text/javascript">
16
16
 
17
17
  window.addEventListener('message', function(e) {
18
18
 
@@ -38,13 +38,13 @@
38
38
 
39
39
 
40
40
 
41
- <iframe id="fugapage" src="iframeのURL"></iframe>
41
+ <iframe id="fugapage" src="iframeのURL"></iframe>```
42
42
 
43
43
 
44
44
 
45
45
  ■子ページ
46
46
 
47
- <script type="text/javascript">
47
+ ```<script type="text/javascript">
48
48
 
49
49
  window.onload = function() {
50
50
 
@@ -54,7 +54,7 @@
54
54
 
55
55
  }
56
56
 
57
- </script>
57
+ </script>```
58
58
 
59
59
 
60
60
 

1

タイトルの編集

2018/04/20 02:25

投稿

ysfree14
ysfree14

スコア19

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