クロスドメインでのiframeの高さ調整方法

A「https://form.kintoneapp.com/public/form/show/040e8136a701839762f3081df38f8d98e8efd8dd38898bea10175669afec5f0f#/」（フォームブリッジ）で生成したiframe※1をB「https://yyy.com」で使用する場合、
iframeの高さをスクロールバー非表示で自動調整する場合はどうすればよいのでしょうか？

※1 iframeのコード

▼理想の形

iframeの内容量が変わると高さが自動調節されるイメージです。

下記が現状のコードです。
1ページ目（step1）はよいのですが、2ページ目(step2)に移動した時iframeがちょうどフッターとの境目で切れてしまい表示されません。スクロールバーを非表示にしたまま可能な回避方法ございましたらご教授をお願いいたします。

よろしくお願いいたします。

▼HTML

<div id="sample1">

<div class="sample2">
	
<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>
	
</div>
	
</div>

▼CSS

div#sample1 {
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.sample2 {
	width: 833px;
	margin: 0 auto;
}

▼javascript(http://yyy.comのHTML内に記入)

<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>

▼javascript(http://xxx.com)

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

kei344

2018/02/17 04:42

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

kei344

2018/02/17 06:32

例示用ドメインはご自身で所有されていない限り example.com, example.jp, example.co.jp など例示用に予約されたドメイン名を利用してください。 http://www.atmarkit.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html https://blog.jxck.io/entries/2017-09-27/example-local-test-domains.html https://blog.ko31.com/201304/sample-domain-example/ また、追記のコードにJavaScriptの処理が書かれていません。

x_x

2018/02/19 02:46

2ページ目とは？

n024

2018/02/19 03:12

iframe内のボタンを押した際に表示される要素のことです。説明に追記した「https://form.kintoneapp.com/public/form/show/040e8136a701839762f3081df38f8d98e8efd8dd38898bea10175669afec5f0f#/」を見ていただくとわかりやすいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

postMessageはテキストしか渡せないはずです。

js
1// window.parent.postMessage(["setHeight", height], "*");
2//                                  ↓
3   window.parent.postMessage(JSON.stringify(["setHeight", height]), "*");