iframe

iframe クロスドメイン 高さ調整は諦めた話

More than 1 year has passed since last update.

iframeに異なるドメイン(クロスドメイン)のコンテンツを読み込んで高さを自動調節しようと思ったら出来なかった

高さを調節する方法は検索すると出てくるのだが異なるドメイン先のiframeにもスクリプトを仕込む必要があるのでASP側ファイルを触れない案件なので諦めた。
※JavaScriptでiframeの高さを取得してみたいなことは同一ドメイン同士であれば可能のようだ。

PCブラウザの場合

スクロールバーを出したくないので
heightを与え、iframeタグにscrolling="no"を記述した。

スマホの場合

スクロールバーを出したくない場合は高さの可変に対応する必要がでてしまうのだが、
前述のように出来ないため、iframeのエリアをスクロールで対応する。

iPhone safariでスクロール可能とするためにiframeの親要素に下記CSSを与える

  height: 60vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;