別ドメインから読み込むiframeの高さを調整したいです

Question

Pardotでフォームを作成し、
それを別ドメインに埋め込みたいのですが、
heightが固定されてしまい、スクロールができる状態です。

調べてみたところ、
別ドメインから読み込むiframeだとブラウザのセキュリティーポリシーにより
iframe内の情報を変更できない場合があるみたいなのですが、
iframeのheightを常にマックスで表示させ、スクロールをなくす方法はありますでしょうか？

https://techacademy.jp/magazine/38314
https://webllica.com/set-iframe-height-dynamic/

Comments

[yambejp]

iframeの高さを固定にしているのはどちらがわなのでしょうか？

[tanap]

パードット側です！
iframeに自動でheight="500"が入る設定になっています！

[yambejp]

回答欄にかきましたが、属性を変更することはできると思いますが
こういうことではない？

[tanap]

ありがとうございます！
いただいたコードを埋め込んでみたのですが、変化なしでした…
別ドメインから読み込むiframeなので、難しいのでしょうか？

[yambejp]

> 別ドメインから読み込むiframe

どうやって埋め込んでいるか次第と思います。
うめこみ終わってから変えればイケルと思いますけど

[tanap]

<iframe src="ここにリンクが入ります" id="formFrame" width="100%" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>

このようなパードットで出力されたコードを埋め込んでいます！

[yambejp]

見た感じそのiframeにheightは設定されていないようですが？
状況わかりませんがiframeの中にさらにiframeがあるということですか？

[tanap]

フォームによって項目数が異なるので、
自動的にマックスの高さで表示されるようになるのが理想です！

わかりづらいとは思いますが、質問文にスクショを添付しました！

[yambejp]

ごめんなさい、どこの高さなのかイマイチ状況がわかりません。
具体的に動作しているものは例示できないのでしょうか？

[tanap]

https://synal.io/contact-inquiry/
こちらです！

[yambejp]

テストしてみましたが、サーバー側の制限に引っかかってます。
iframeの高さは適当に大きめのものを指定しておくしかありません。

[tanap]

なるほど…。
ありがとうございます！

[yambejp]

ちなみにdocument.querySelector('#formFrame').contentDocumentにアクセスすると
クロスオリジンの制限が確認できると思います

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('iframe').setAttribute('height',100);
});
</script>
<iframe height="500"></iframe>

Comments

[yambejp]

クロスオリジンの関係で、iframeの中身が取れません

<iframe src="https://go.givery.co.jp/l/520001/2018-05-03/69l3x7" id="formFrame" height="1500" width="100%" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>

中身の高さを拾えないので適当な高さを指定してあげてください