[改]画像一枚だけの別ドメインページをiframeで読み込みレスポンシブに対応:メモ

バッドノウハウかもシリーズ。以前に「画像一枚だけの別ドメインページをiframeで読み込みレスポンシブに対応:メモ」という記事を書きましたが、それの改良版です。

改良といっても、以前とは少し違う用途という感じですが。

前提と実現したいこと

前提は以下の通り。以前の記事とほぼ同じです。

• iframeで画像が1枚だけあるページを読み込む
• iframeをラッピングする要素がない
• 画像のサイズは固定で1サイズでiframeにwidth属性が指定されている
• 読み込むのは別ドメインのページ
• IE8以下は切り捨て

実現しいたことは以下の通りです。

• スマホサイズ用に基本サイズなしでレスポンシブ対応

以前の目的は、PCサイズの時点で統一した固定幅に縮小する必要があり、それをレスポンシブで伸縮させるようにしました。
今回は固定の幅はなく、最初からレスポンシブ対応のみです。

コード

構造は以下を想定しています。

<div class="contents">
 <p>テキスト</p>
 <iframe></iframe>
 <p>テキスト</p>
</div>

コンテンツの大枠として.contentsというdivがあり、その中にpタグなどの要素があります。ブログ記事の中にiframeがあるような状態です。

続いて、作成したコードです。

<script type="text/javascript">
jQuery(function($){
  //iframeをdiv.wrapでラッピング
  $('.contents iframe').wrap('<div class="wrap"></div>');
  function divide(num){
  //小数点第4位を切り捨て
      var  num1 = num * 10000;
      num1 =  Math.round(num1) / 10000;
      return num1;
    }
  $(window).on('load resize orientationchange', function(){
　　//リサイズやロードの度に.wrapを探して処理
    $('.wrap').each(function(){
　　　 //現在のiframeのwidth属性を取得
      var iframeWidth = $(this).find('iframe').attr('width');
　　　 //現在のiframeのheight属性を取得
      var iframeHeight = $(this).find('iframe').attr('height');
　　　 //コンテンツ部分の大枠の幅を取得
      var baseWidth = $('.contents').width();
      //枠のwidthと現在のサイズとの差を割合で算出し小数点4位で切り捨て
      var thisWidth = baseWidth / iframeWidth;
      var ratio = divide(thisWidth);
      //元のサイズよりも拡大しないように、倍率が1以上の時は1を設定
      if (ratio > 1){
        var ratio = 1;
      }
      //iframeのheightにwidthと同じ倍率をかけて高さを決定
      var setIframeHeight = iframeHeight * ratio;
      //レスポンシブでサイズを揃える
      $('iframe[width="' + iframeWidth + '"]').css({'transform':'scale('+ ratio +')','-webkit-transform':'scale('+ ratio +')','-moz-transform':'scale('+ ratio +')','-ms-transform':'scale('+ ratio +')+','transform-origin':'0 0'});
      //iframeをラッピングした要素に幅と高さを指定し、はみ出た部分を隠す
      $(this).css({'height': setIframeHeight +'px','width': baseWidth +'px','overflow':'hidden'});
    });
  });
});
</script>

今回はcssに追記が不要なようにjQueryで値をすべて設定しています。

結び

前回の試行錯誤があったため、多少はスムーズにいきました。が、やはりすんなりとはいかない部分もあったりで。

なお、上記のコードはiframeであればなんでもかんでも作用してしまいます。
実際に使う際には、必要なiframeを絞り込むためにiframeのsrc属性などを利用したり、前提からずれますがiframeは必ずなにかでラッピングしておくほうが誤動作がありません。

蛇足

「iframe レスポンシブ」などのワードで検索してでてくるサイトの中には、「コレですべてのiframeに対応！」のようなタイトルと内容の記事がありますが、個人的には記述に疑問のある所が散見されます。

具体的な手法としては、cssを用いてpaddingの%指定を活かし、縦横比を保持しつつ縮小するというタイプの内容です。

こういう記事に例示されているのはYouTubeばかりであり、YouTubeだからこそできているに過ぎないように思います。同種の仕組みを持つものでもなければ縮小されません。

基本的にiframeは呼び出し先からの要素の操作ができませんし、なによりimg要素ではないため横幅100%にしたところで、中身が拡大縮小するはずもなく…。
結果として単にはみ出た部分が隠れるという応急処置になります。

「cssで縦横比を保持する」にしても、YouTubeが16:9の比率であることが前提の方法であり、他の比率には対応できません。比率の数だけクラスと記述が必要になるはずです。

もちろん、YouTubeだけとはいえcssのコピペで対応できるのは素晴らしいことだと思いますが。