サイトに埋め込んだ際の高さ表示について

前提・実現したいこと

iframeを用いたページの埋め込みをして表示する。

表示する各ページに合わせた高さで内容が表示されて欲しい。

発生している問題・エラーメッセージ

高さ側の表示が上手くいかない。

該当のソースコード

html
1<iframe src="https://teratail.com/" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>

試したこと

デベロッパーツールを使用の上での検討
インターネットでの検索

補足情報（FW/ツールのバージョンなど）

上のアドレスは仮です。（アドレス的に宣伝等には思われないないかなって思ったので、本当はあるブログのアドレスが入ってます）
本当はもっといろいろ記載されてますが、とりあえずは基礎的な上記の記載コードでも同じ現象は起こったので代用で入れてます。
ブログの埋め込みなので本当ならWordpressを使った方が速そうだなとは思うのですが、仕様上それが出来ません。
ページが1つだけなら直接高さの数値を入れるという力技も出来るのですがページごとで高さが異なるので見た目上に不都合が生じる。
auto等も試しましたが上手くいきませんでした。

CSS等を用いても問題ありません。

なんか物凄い基本的な部分で思い込みが起こっている気もするので、大変心苦しいのですが、ご助力頂けたら幸いです。

m.ts10806

2019/06/14 05:30 編集

直接の回答ではないのでこちらに書きますが、他者のサイトであればiframe表示はやめたほうが良いかと思います。 ifameで読み込まれることを拒否することもできます。 https://buzzwordjp.blogspot.com/2011/09/iframe-x-frame-options-http.html ※セキュリティ対策で一般的に用いられる手法です

mutsuki22

2019/06/14 05:41 編集

そんなセキュリティがあるんですね。一応該当サイトを新たにサイトを新しくするにあたり、前から書いていたブログページ（現在進行系で更新されてます）を追加してそのページにそのブログを表示したいって事なんですよね。もし、iframe表示をやめるもであればどうするのがベストなんでしょうか。やっぱりWordpressのサイトに切り替えるなんですかね？

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

回答2件

ベストアンサー

iframe が複数あるなら、event.source からどの iframe か特定してください。
子

JavaScript
1  window.addEventListener('load', function(event) {
2    window.parent.postMessage(['setHeight', document.documentElement.scrollHeight], '*');
3  }, false);

親

JavaScript
1  window.addEventListener('message', function(event) {
2    console.log(event.source);
3    switch(event.data[0]) {
4      case 'setHeight':
5        document.querySelector('iframe').height = event.data[1].toString();
6        break;
7    }
8  }, false);

https://developer.mozilla.org/ja/docs/Web/API/Window/postMessage

https://teratail.com/questions/113901
https://teratail.com/questions/12169

投稿2019/06/14 06:56

x_x

総合スコア13749

mutsuki22

2019/06/17 01:04

ご回答ありがとうございます。大変助かり、また勉強になりました。似た質問もあったのまでご提示頂き分かりやすかったです。最後になりましたが。返信が遅くなっていまい申し訳ありませんでした。

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

「ブログ」がご自身の管理するサーバ上のものであれば対処法はありますが、そうでなければできません。

同一ドメイン（およびiframe内のサーバでCROSSが許可されている状態）であれば、JavaScriptでiframe内の要素の高さを取得し、iframeの高さを変えればよいです。

投稿2019/06/14 06:02

kei344

総合スコア69407

mutsuki22

2019/06/14 06:32

ご回答頂きありがとうございます。申し訳ないのですが、1つ追加で教えて頂ければと思うのですが・・・ということは、iframe内の要素毎（ページ毎）に合わせて（ブログページ内で次のページに行く場合の事です、埋め込みページのアドレスは変わらない）の高さの変更は出来ないという認識で合ってますか？（説明が下手ですみません・・・）