Help us understand the problem. What is going on with this article?

iframeのクロスオリジンを倒す

More than 3 years have passed since last update.

iframeで別ドメインを呼び出して操作したい

iframeでクロスオリジン対応をする必要があったのでメモ。

同じドメインでiframeを呼び出すことは問題ないが、異なるドメインをiframeで呼び出す場合、クロスオリジン対応をしないとiframe内部のHTMLにアクセスできない。

何が困るかって言うと「レスポンシブで高さが変わるから読み込み時のサイズに合わせてiframeの高さを中の要素に合わせたい」とかそういう時。

そういう時にはwindow.postMessageで子→親に情報を渡してやることで対応する。

子(iframe内のページ)

$(function(){
    var h = $('html').height();
    // 親におくる。第2引数は親のドメインを指定
    parent.postMessage(h, 'https://fuga.com/');
});

親(呼び出し側)

<iframe src="https://hoge.com/iframe.html"></iframe>
$(window).on('message', function(e){
    var height = e.originalEvent.data;
    $('iframe').css({'height': height + 'px'});
});

参照

Can I use
PostMessageを使ったクロスドメイン通信
jQuery doesn't support postmessage event?

T_sa
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away