【フォームブリッジ】iframeの高さ自動調節について

kintone カスタマイズ
1

 お世話になっております。

フォームブリッジの「iframe」を親ページで表示する際に、postMessageを使用して高さの自動調整を行いたいと思っております。

現在実装中のコードだと、親ページのステップフォームstep1のみにしか反映されません。

ステップフォームのstep1,2,3と確認画面に高さの自動調整を反映させるにはどうすればよいでしょうか？

なお、クロスドメインを考慮した回答をいただけると幸いです。

 

【親ページHTML】

<html>

<head>

</head>

<body>

<iframe id=“fugapage” scrolling=“no” src=“子ページURL” width=“833px” height=“auto” style=“display:block; margin:0 auto; border:none;”></iframe>

<script>
window.addEventListener(‘message’, function(e) {
var iframe = $(“#fugapage”);
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case ‘setHeight’:
iframe.height(data);
break;
}
}, false);
</script>

</body>
</html>

 

【子ページjava】

(function() {
“use strict”;

fb.events.form.mounted = [function (state) {
var height = document.getElementsByTagName(“html”)[0].scrollHeight;
window.parent.postMessage([“setHeight”, height], “*”);

return state;
}];
})();

 

▼以下の方と内容が被る部分があると思います

【フォームブリッジ】入力画面、確認画面、完了画面のページ内移動について

https://developer.cybozu.io/hc/ja/community/posts/115011173366–%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%83%96%E3%83%AA%E3%83%83%E3%82%B8-%E5%85%A5%E5%8A%9B%E7%94%BB%E9%9D%A2-%E7%A2%BA%E8%AA%8D%E7%94%BB%E9%9D%A2-%E5%AE%8C%E4%BA%86%E7%94%BB%E9%9D%A2%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E7%A7%BB%E5%8B%95%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

 

2

Nさん
cstapの瀧ヶ平です

実装しているコードがどのようなものかはわからないので推測ですが、
ステップフォームの遷移時のイベントはステップが進む/戻る前のイベントなので、実際に遷移した後の高さを取得するためにはフォームが描画されるのを待つ必要があるからではないでしょうか？

setTimeout関数などで遅延して処理を行うことで対応できるかと思います

3

瀧ヶ平様

以下、子ページ（フォームブリッジ）のステップフォーム遷移時に使用するイベントを追加したコードですが、

どの部分にsetTimeout関数を記入すればよいのでしょうか？

 

※実装コードは説明文に追加いたしました。

 

【子ページのjava】

(function() {
“use strict”;

fb.events.form.mounted = [function (state) {
var height = document.getElementsByTagName(“html”)[0].scrollHeight;
window.parent.postMessage([“setHeight”, height], “*”);

return state;
}];

fb.events.step.back = [function (state) {
var height = document.getElementsByTagName(“html”)[0].scrollHeight;
window.parent.postMessage([“setHeight”, height], “*”);

return state;
}];

fb.events.step.next = [function (state) {
var height = document.getElementsByTagName(“html”)[0].scrollHeight;
window.parent.postMessage([“setHeight”, height], “*”);

return state;
}];

})();

4

瀧ヶ平様

 

上記javaにsetTimeout関数を入れて試してみたものの良い結果は得られませんでした。

 

【子ページのjava】

(function() {
“use strict”;

fb.events.form.mounted = [function (state) {
var height = document.getElementsByTagName(“html”)[0].scrollHeight;
window.parent.postMessage([“setHeight”, height], “*”);

return state;
}];

var func= function(){
var height = document.getElementsByTagName(“html”)[0].scrollHeight;
window.parent.postMessage([“setHeight”, height], “*”);
}

fb.events.step.next = [function (state) {
setTimeout(func, 1000);
return state;
}];

fb.events.step.back = [function (state) {
setTimeout(func, 1000);
return state;
}];

})();

5

Nさん

これはsetTimeoutの問題ではなく親ページのJavaScriptの問題かと思います

iframeの高さを設定したいのであれば

iframe.style.height = data + "px";

とするべきです

6

瀧ヶ平様

 

以下コードで実装してみたところ、1ページ目の高さが縮んでしまいました。

配置する場所が違うのでしょうか？

ご確認をよろしくお願いいたします。

 

【親ページHTML】

<html>

<head>

</head>

<body>

<iframe id=“fugapage” scrolling=“no” src=“子ページURL” width=“833px” height=“auto” style=“display:block; margin:0 auto; border:none;”></iframe>

<script>
window.addEventListener(‘message’, function(e) {
var iframe = $(“#fugapage”);
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case ‘setHeight’:
iframe.style.height = data + “px”;
break;
}
}, false);
</script>

</body>
</html>

 

【子ページjava】

(function() {
“use strict”;

fb.events.form.mounted = [function (state) {
var height = document.getElementsByTagName(“html”)[0].scrollHeight;
window.parent.postMessage([“setHeight”, height], “*”);

return state;
}];

var func= function(){
var height = document.getElementsByTagName(“html”)[0].scrollHeight;
window.parent.postMessage([“setHeight”, height], “*”);
}

fb.events.step.next = [function (state) {
setTimeout(func, 1000);
return state;
}];

fb.events.step.back = [function (state) {
setTimeout(func, 1000);
return state;
}];

})();

7

Nさん

おそらくもともとの表示よりもページ全体の高さのほうが低かったのではないかと思います。

なのであれば、heightを指定するのではなく、min-heightのスタイルを指定するのが良いですね

iframe.style.minHeight = data + "px";

ではどうでしょうか？

8

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。