クロスドメインでiframeを読み込ませてついでにレスポンシブ対応もする方法

こんにちは、daimaです。

本日は異なるクロスドメインでiframeを埋め込んで
なおかつ画面を拡縮しても
iframeの高さが自動で調整されるように
レスポンシブ対応させる方法をご紹介します。

なぜ、この記事を書いたかというと
私が仕事で作ったカラーミーのECサイトに
別ドメインで制作したWordpressのブログサイトの
新着一覧を載せるという仕様があったのですが
CORS(オリジン間リソース共有)に引っかかったり
iframeだとレスポンシブ時に高さが自動で変わらなかったりで
思った以上に時間を取られてしまったので
この記事を書くことで少しでも
同じ問題で悩む方を減らせればと思ったためです。

それではどうぞ。

コード

<iframe id="iframe_indexBlog" src="https://◯◯◯.com/newslist" frameborder="0" style="width: 100%;" scrolling="no"></iframe>

iframeを埋め込む側のサイトに埋め込むHTMLコードです。

普通にiframeコードを書く場合と特に変わりはないですが
idだけは何かしら設定しておいてください。

また一つ気をつけたい点として
埋め込み側のサイトがSSL化されている場合、
埋め込み元のサイトについてもSSL対応が完了している必要があります。

//iframeの高さを調整する
$(function(){

$(window).on('message', function(event){
  console.log(event.originalEvent.data);
  
  $('#'+event.originalEvent.data['slug']).css(
    {
      'width': '100%',
      'height': event.originalEvent.data['height']
    });
  });

});

こちらもiframeを表示させたい側のサイトに
記述してください。(jQueryも一緒に)

このコードではiframeが投げるpostMessageに含まれる
iframe側のページの高さ情報を読み取って
更にそれを一定間隔でiframeの高さにインラインスタイルで
反映させることによって疑似的なレスポンシブ化を実現しています。

$(function()
{

function post_height(){
  
  // iframeの高さ
  var height = $('body').height();

  //console.log(height);

  var obj = {slug: 'iframe_indexBlog',height: height};

  // 親へiframeの高さを送信
  // postMessage(<送信する値>, <送信先のドメイン>)
  window.parent.postMessage(obj,"https://○○○○.jp/");
}

post_height();

setInterval(post_height, 100);

});

最後にこちらは
埋め込まれる側のドメイン側に用意した
iframeで読み込みたいページの中に記述するjavascriptコードです。

これの肝はpostMessageメソッドで、
こいつの第二引数にURL(例ではhttps://○○○○.jp/)を指定することで、
ここで指定したドメインに対してはCORSに引っかからずに
情報を送ることが可能になります。

ちなみに私の場合は
Wordpressの固定ページで読み込み専用の
最新記事一覧ページを作って
そのテンプレートの中に直接このスクリプトを
直書きするという方法で実装しました。

またsetInterval関数の第二引数の数値をいじることで
iframe側の高さ調整の頻度を調整することができます。
数値を減らすほどより滑らかに見えますが
その分処理の回数が増えて
パフォーマンスに影響を及ぼす可能性も増えるので
ここらへんは適時調整してみてください。

さいごに

以上です。

CORSは制作側にとってはうざったく感じることもありますが
Webの安全性を担保する上では必要なものなので
なんとかうまく付き合っていきたいものですね。