質問編集履歴

6

2018/03/02 08:34

投稿

n024
n024

スコア6

test CHANGED
File without changes
test CHANGED
File without changes

5

一部コードを変更しました。

2018/03/02 08:34

投稿

n024
n024

スコア6

test CHANGED
File without changes
test CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
 
50
50
 
51
- <iframe id="bar" frameborder="0" scrolling="no" src="https://form.kintoneapp.com/public/form/show/040e8136a701839762f3081df38f8d98e8efd8dd38898bea10175669afec5f0f#/" title="" width="100%" hight="1024px"></iframe>
51
+ <iframe id="fugapage" scrolling="no" src="https://form.kintoneapp.com/public/form/show/0b3fc6161c1099ff74546c2efdc95af9049f0141143fc59aca4e4cfd45a3f49c?iframe=true" width="833px" height="auto" style="display:block; margin:0 auto; border:none;"></iframe>
52
52
 
53
53
 
54
54
 

4

不足情報を追加しました。

2018/02/19 03:14

投稿

n024
n024

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,12 @@
1
- A「https://xxx.com」(フォームブリッジ)で生成したiframeをB「https://yyy.com」で使用する場合、
1
+ A「https://form.kintoneapp.com/public/form/show/040e8136a701839762f3081df38f8d98e8efd8dd38898bea10175669afec5f0f#/」(フォームブリッジ)で生成したiframe※1をB「https://yyy.com」で使用する場合、
2
2
 
3
- iframeの高さを自動調整する場合はどのよな方法をすればよいのでしょうか?
3
+ iframeの高さをスクロールバー非表示で自動調整する場合はどうすればよいのでしょうか?
4
+
5
+
6
+
7
+ ※1 iframeのコード
8
+
9
+ <iframe frameborder="0" scrolling="auto" src="https://form.kintoneapp.com/public/form/show/040e8136a701839762f3081df38f8d98e8efd8dd38898bea10175669afec5f0f?iframe=true" title="新しいアプリ" width="100%" height="1024px"></iframe>
4
10
 
5
11
 
6
12
 
@@ -18,15 +24,11 @@
18
24
 
19
25
 
20
26
 
21
- 【追記】
22
-
23
27
 
24
28
 
25
29
  下記が現状のコードです。
26
30
 
27
- 1ページ目はよいのですが、2ページ目に移動した時iframeがちょうどフッターとの境目で切れてしまい表示されません。
31
+ 1ページ目(step1)はよいのですが、2ページ目(step2)に移動した時iframeがちょうどフッターとの境目で切れてしまい表示されません。スクロールバーを非表示にしたまま可能な回避方法ございましたらご教授をお願いいたします。
28
-
29
- スクロールバーを非表示にしたまま可能な回避方法ございましたらご教授をお願いいたします。
30
32
 
31
33
 
32
34
 
@@ -46,7 +48,7 @@
46
48
 
47
49
 
48
50
 
49
- <iframe id="bar" frameborder="0" scrolling="no" src="https://xxx.com" title="" width="100%" hight="1024px"></iframe>
51
+ <iframe id="bar" frameborder="0" scrolling="no" src="https://form.kintoneapp.com/public/form/show/040e8136a701839762f3081df38f8d98e8efd8dd38898bea10175669afec5f0f#/" title="" width="100%" hight="1024px"></iframe>
50
52
 
51
53
 
52
54
 

3

使用しているjavascriptを変更しました。

2018/02/19 03:10

投稿

n024
n024

スコア6

test CHANGED
File without changes
test CHANGED
@@ -84,19 +84,33 @@
84
84
 
85
85
  ```
86
86
 
87
- ▼javascript(http://yyy.com)
87
+ ▼javascript(http://yyy.comのHTML内に記入)
88
88
 
89
89
  ```
90
90
 
91
- window.addEventListener("message", receiveSize, false);
91
+ <script>
92
92
 
93
- function receiveSize(e) {
93
+ window.addEventListener('message', function(e) {
94
94
 
95
- if (e.origin === "http://yyy.com") // for security: set this to the domain of the iframe - use e.uri if you need more specificity
95
+ var iframe = $("#fugapage");
96
96
 
97
- document.getElementById("bar").style.height = e.data + "px";
97
+ var eventName = e.data[0];
98
98
 
99
+ var data = e.data[1];
100
+
101
+ switch(eventName) {
102
+
103
+ case 'setHeight':
104
+
105
+ iframe.height(data);
106
+
107
+ break;
108
+
99
- }
109
+ }
110
+
111
+ }, false);
112
+
113
+ </script>
100
114
 
101
115
  ```
102
116
 
@@ -106,15 +120,13 @@
106
120
 
107
121
  ```
108
122
 
109
- window.addEventListener("load", postSize, false);
123
+ window.onload = function() {
110
124
 
111
- function postSize(e){
125
+ var height = document.getElementsByTagName("html")[0].scrollHeight;
112
126
 
113
- var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
127
+ window.parent.postMessage(["setHeight", height], "*");
114
128
 
115
- if (typeof target != "undefined" && document.body.scrollHeight)
129
+ }
116
-
117
- target.postMessage(document.getElementById("foo").scrollHeight, "*");
118
130
 
119
131
  }
120
132
 

2

JavaScriptを追加しました。

2018/02/19 02:59

投稿

n024
n024

スコア6

test CHANGED
File without changes
test CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
 
48
48
 
49
- <iframe frameborder="0" scrolling="no" src="https://xxx.com" title="" width="100%" hight="1024px"></iframe>
49
+ <iframe id="bar" frameborder="0" scrolling="no" src="https://xxx.com" title="" width="100%" hight="1024px"></iframe>
50
50
 
51
51
 
52
52
 
@@ -83,3 +83,39 @@
83
83
  }
84
84
 
85
85
  ```
86
+
87
+ ▼javascript(http://yyy.com)
88
+
89
+ ```
90
+
91
+ window.addEventListener("message", receiveSize, false);
92
+
93
+ function receiveSize(e) {
94
+
95
+ if (e.origin === "http://yyy.com") // for security: set this to the domain of the iframe - use e.uri if you need more specificity
96
+
97
+ document.getElementById("bar").style.height = e.data + "px";
98
+
99
+ }
100
+
101
+ ```
102
+
103
+
104
+
105
+ ▼javascript(http://xxx.com)
106
+
107
+ ```
108
+
109
+ window.addEventListener("load", postSize, false);
110
+
111
+ function postSize(e){
112
+
113
+ var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
114
+
115
+ if (typeof target != "undefined" && document.body.scrollHeight)
116
+
117
+ target.postMessage(document.getElementById("foo").scrollHeight, "*");
118
+
119
+ }
120
+
121
+ ```

1

現在使用しているコードを記載いたしました。

2018/02/17 07:51

投稿

n024
n024

スコア6

test CHANGED
File without changes
test CHANGED
@@ -18,12 +18,68 @@
18
18
 
19
19
 
20
20
 
21
+ 【追記】
21
22
 
22
23
 
23
- 他サイトなどを参考に色々試行錯誤はしているのですが、まったくうまくいきません。
24
24
 
25
+ 下記が現状のコードです。
26
+
27
+ 1ページ目はよいのですが、2ページ目に移動した時iframeがちょうどフッターとの境目で切れてしまい表示されません。
28
+
25
- 可能したらご教授をお願いいたします。
29
+ スクロールバーを非表示にしたまま可能な回避方法ございましたらご教授をお願いいたします。
26
30
 
27
31
 
28
32
 
29
33
  よろしくお願いいたします。
34
+
35
+
36
+
37
+ ▼HTML
38
+
39
+ ```
40
+
41
+ <div id="sample1">
42
+
43
+
44
+
45
+ <div class="sample2">
46
+
47
+
48
+
49
+ <iframe frameborder="0" scrolling="no" src="https://xxx.com" title="" width="100%" hight="1024px"></iframe>
50
+
51
+
52
+
53
+ </div>
54
+
55
+
56
+
57
+ </div>
58
+
59
+ ```
60
+
61
+
62
+
63
+ ▼CSS
64
+
65
+ ```
66
+
67
+ div#sample1 {
68
+
69
+ width: 100%;
70
+
71
+ height: auto;
72
+
73
+ margin: 0 auto;
74
+
75
+ }
76
+
77
+ .sample2 {
78
+
79
+ width: 833px;
80
+
81
+ margin: 0 auto;
82
+
83
+ }
84
+
85
+ ```