読者です 読者をやめる 読者になる 読者になる

リズムのじかん

javascript、typescriptなど中心に書きます。

iframeで埋め込んだページの幅・高さを取得する

仕事でハマったのでメモ。

やりたいこと

  • webページの一部で、iframeを使用して外部ページを埋め込む。
  • このとき、スクロールを表示せず、埋め込んでない風に(いかにもページの一部ですよ風に)表示する。

対応案1:そもそも、、

できるならiframe使わないで。。。
別サイトは別ウィンドウで開くのが自然な気がします。

対応案2:css

ほとんどのブラウザで以下で上手くできました。

index.html

<iframe 
  id="myFrame"
  class="frame"
  src="http://www.xxx.com"
  frameborder="0"
  height="100%"
  width="100%"
  scrolling="no">
</iframe>

index.css

.frame {
  overflow:hidden;
  overflow-x:hidden;
  overflow-y:hidden;
  height:100%;
  width:100%;
  position:relative;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
}

対応案3:javascript

ie8は対応案2で対応できませんでした。(chrome, firefox, ie9以降はできた)
幅と高さが100%にならずスクロールがでてしまう。。
いろいろ調べて以下の方法でできました。
javascriptでiframe内のページの高さを取得して設定します。

(function(window, $){
  $(window).load(function(){
    var $frame = $('.frame');
    var innerHeight = $frame.get(0).contentWindow.document.body.scrollHeight;
    var innerWidth = $frame.get(0).contentWindow.document.body.scrollWidth;
    $frame.attr('height', innerHeight + 'px');
    $frame.attr('width', innerWidth + 'px');
  })
})(window, jQuery)

$(document).ready()では上手くできません。
iframe内のページの読み込みが完了する前にサイズを取得してしまうことがあるからです。