jQuery：iFrame：PostMessageを使って動的に高さを変更する

はじめに

今回は、javascriptを使って、iFrameの高さを表示する画面の高さで動的に変更するお話です。　とあるサービスで、サービスログイン時にWORDPRESSへもログインして、サイト内へ管理画面を表示するような設計で進めていたのですが、いろいろな貴重な意見をいただいたのと、時間が作れたのとで、今は直感的に編集できるような感じで作り変えています。　そんな時に、この実装を見つけました。　半年ころ前に調べながら実装したのだと思うのですが、クロスドメインを意識するときは、他でも同じように作るのかもしれない・・ということでいったんまとめます。

仕組み

・iFrame内のサイト（送信側）は、任意のタイミングで「message」を送信する。
・iFrameを表示するサイト（受信側）は、イベントリスナで「message」を受け取る。

コード

まとめ

高さ調整に限らず覚えとくと便利な機能でした。

d(｀Д´)b39