jQuery:iFrame:PostMessageを使って動的に高さを変更する
はじめに
今回は、javascriptを使って、iFrameの高さを表示する画面の高さで動的に変更するお話です。 とあるサービスで、サービスログイン時にWORDPRESSへもログインして、サイト内へ管理画面を表示するような設計で進めていたのですが、いろいろな貴重な意見をいただいたのと、時間が作れたのとで、今は直感的に編集できるような感じで作り変えています。 そんな時に、この実装を見つけました。 半年ころ前に調べながら実装したのだと思うのですが、クロスドメインを意識するときは、他でも同じように作るのかもしれない・・ということでいったんまとめます。
仕組み
・iFrame内のサイト(送信側)は、任意のタイミングで「message」を送信する。
・iFrameを表示するサイト(受信側)は、イベントリスナで「message」を受け取る。
コード
まとめ
高さ調整に限らず覚えとくと便利な機能でした。
d(`Д´)b39