Posted at

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

More than 1 year has 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?