teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

6

2018/03/02 08:34

投稿

n024
n024

スコア6

title CHANGED
File without changes
body CHANGED
File without changes

5

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

2018/03/02 08:34

投稿

n024
n024

スコア6

title CHANGED
File without changes
body CHANGED
@@ -23,7 +23,7 @@
23
23
 
24
24
  <div class="sample2">
25
25
 
26
- <iframe id="bar" frameborder="0" scrolling="no" src="https://form.kintoneapp.com/public/form/show/040e8136a701839762f3081df38f8d98e8efd8dd38898bea10175669afec5f0f#/" title="" width="100%" hight="1024px"></iframe>
26
+ <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>
27
27
 
28
28
  </div>
29
29
 

4

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

2018/02/19 03:14

投稿

n024
n024

スコア6

title CHANGED
File without changes
body CHANGED
@@ -1,18 +1,19 @@
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
- iframeの高さを自動調整する場合はどのよな方法をすればよいのでしょうか?
2
+ iframeの高さをスクロールバー非表示で自動調整する場合はどうすればよいのでしょうか?
3
3
 
4
+ ※1 iframeのコード
5
+ <iframe frameborder="0" scrolling="auto" src="https://form.kintoneapp.com/public/form/show/040e8136a701839762f3081df38f8d98e8efd8dd38898bea10175669afec5f0f?iframe=true" title="新しいアプリ" width="100%" height="1024px"></iframe>
4
6
 
7
+
5
8
  ▼理想の形
6
9
 
7
10
  ![](5a5b40951f4335c29d3b63dbd64b234e.jpeg)
8
11
 
9
12
  iframeの内容量が変わると高さが自動調節されるイメージです。
10
13
 
11
- 【追記】
12
14
 
13
15
  下記が現状のコードです。
14
- 1ページ目はよいのですが、2ページ目に移動した時iframeがちょうどフッターとの境目で切れてしまい表示されません。
16
+ 1ページ目(step1)はよいのですが、2ページ目(step2)に移動した時iframeがちょうどフッターとの境目で切れてしまい表示されません。スクロールバーを非表示にしたまま可能な回避方法ございましたらご教授をお願いいたします。
15
- スクロールバーを非表示にしたまま可能な回避方法ございましたらご教授をお願いいたします。
16
17
 
17
18
  よろしくお願いいたします。
18
19
 
@@ -22,7 +23,7 @@
22
23
 
23
24
  <div class="sample2">
24
25
 
25
- <iframe id="bar" frameborder="0" scrolling="no" src="https://xxx.com" title="" width="100%" hight="1024px"></iframe>
26
+ <iframe id="bar" frameborder="0" scrolling="no" src="https://form.kintoneapp.com/public/form/show/040e8136a701839762f3081df38f8d98e8efd8dd38898bea10175669afec5f0f#/" title="" width="100%" hight="1024px"></iframe>
26
27
 
27
28
  </div>
28
29
 

3

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

2018/02/19 03:10

投稿

n024
n024

スコア6

title CHANGED
File without changes
body CHANGED
@@ -41,21 +41,27 @@
41
41
  margin: 0 auto;
42
42
  }
43
43
  ```
44
- ▼javascript(http://yyy.com)
44
+ ▼javascript(http://yyy.comのHTML内に記入)
45
45
  ```
46
+ <script>
46
- window.addEventListener("message", receiveSize, false);
47
+ window.addEventListener('message', function(e) {
48
+ var iframe = $("#fugapage");
49
+ var eventName = e.data[0];
50
+ var data = e.data[1];
47
- function receiveSize(e) {
51
+ switch(eventName) {
48
- if (e.origin === "http://yyy.com") // for security: set this to the domain of the iframe - use e.uri if you need more specificity
49
- document.getElementById("bar").style.height = e.data + "px";
52
+ case 'setHeight':
53
+ iframe.height(data);
54
+ break;
50
- }
55
+ }
56
+ }, false);
57
+ </script>
51
58
  ```
52
59
 
53
60
  ▼javascript(http://xxx.com)
54
61
  ```
55
- window.addEventListener("load", postSize, false);
56
- function postSize(e){
62
+ window.onload = function() {
57
- var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
58
- if (typeof target != "undefined" && document.body.scrollHeight)
59
- target.postMessage(document.getElementById("foo").scrollHeight, "*");
63
+ var height = document.getElementsByTagName("html")[0].scrollHeight;
64
+ window.parent.postMessage(["setHeight", height], "*");
65
+ }
60
66
  }
61
67
  ```

2

JavaScriptを追加しました。

2018/02/19 02:59

投稿

n024
n024

スコア6

title CHANGED
File without changes
body CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  <div class="sample2">
24
24
 
25
- <iframe frameborder="0" scrolling="no" src="https://xxx.com" title="" width="100%" hight="1024px"></iframe>
25
+ <iframe id="bar" frameborder="0" scrolling="no" src="https://xxx.com" title="" width="100%" hight="1024px"></iframe>
26
26
 
27
27
  </div>
28
28
 
@@ -40,4 +40,22 @@
40
40
  width: 833px;
41
41
  margin: 0 auto;
42
42
  }
43
+ ```
44
+ ▼javascript(http://yyy.com)
45
+ ```
46
+ window.addEventListener("message", receiveSize, false);
47
+ function receiveSize(e) {
48
+ if (e.origin === "http://yyy.com") // for security: set this to the domain of the iframe - use e.uri if you need more specificity
49
+ document.getElementById("bar").style.height = e.data + "px";
50
+ }
51
+ ```
52
+
53
+ ▼javascript(http://xxx.com)
54
+ ```
55
+ window.addEventListener("load", postSize, false);
56
+ function postSize(e){
57
+ var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
58
+ if (typeof target != "undefined" && document.body.scrollHeight)
59
+ target.postMessage(document.getElementById("foo").scrollHeight, "*");
60
+ }
43
61
  ```

1

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

2018/02/17 07:51

投稿

n024
n024

スコア6

title CHANGED
File without changes
body CHANGED
@@ -8,8 +8,36 @@
8
8
 
9
9
  iframeの内容量が変わると高さが自動調節されるイメージです。
10
10
 
11
+ 【追記】
11
12
 
13
+ 下記が現状のコードです。
12
- 他サイトなどを参考に色々試行錯誤してのですが、まっうまません。
14
+ 1ページ目いのですが、2ページ目に移動し時iframeがちょどフッターとの境目で切れてしまい表示されません。
13
- 可能したらご教授をお願いいたします。
15
+ スクロールバーを非表示にしたまま可能な回避方法ございましたらご教授をお願いいたします。
14
16
 
15
- よろしくお願いいたします。
17
+ よろしくお願いいたします。
18
+
19
+ ▼HTML
20
+ ```
21
+ <div id="sample1">
22
+
23
+ <div class="sample2">
24
+
25
+ <iframe frameborder="0" scrolling="no" src="https://xxx.com" title="" width="100%" hight="1024px"></iframe>
26
+
27
+ </div>
28
+
29
+ </div>
30
+ ```
31
+
32
+ ▼CSS
33
+ ```
34
+ div#sample1 {
35
+ width: 100%;
36
+ height: auto;
37
+ margin: 0 auto;
38
+ }
39
+ .sample2 {
40
+ width: 833px;
41
+ margin: 0 auto;
42
+ }
43
+ ```