中年プログラマーの息抜き

カシマルです。 最近、新しい土地へ引っ越しをしたのですが、これを機に何か始めたいなと思ってブログをはじめました。気の向くままに更新していきます。

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

はじめに

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

仕組み

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

コード

まとめ

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

d(`Д´)b39