ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Portholeはiframe内のコンテンツと相互にメッセージを授受できるライブラリです。

最近はFacebookアプリやブログパーツのようにiframeを使って外部サイトのデータを表示するケースが増えています。そんな中、親ウィンドウと子フレームの中でデータを授受できるPortholeはきっと役に立つはずです。


親ウィンドウと子フレームは別ドメインになっています。


子フレームからのアクションで親ウィンドウにおけるiframeの高さが変わりました。


親ウィンドウの色を子フレームから変更しました。


別な色に変更。


別ドメインなのが分かります。


親ウィンドウから子フレームの色を変更しました。

Portholeでは親ウィンドウと子フレームとで相互にメッセージをやり取りできます。iframeは複数作成して、それぞれに別なメッセージを飛ばすことができます。子フレームでは受け取ったメッセージを処理分けして必要な処理を行う必要があります。

PortholeはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

JavaScriptはセキュリティ上の理由から様々な制限があります。例えば外部ドメインのJSONデータを受け取れないのはその一つです。しかしJSONPを使うことによって可能になっています。iframe内のデータに親ウィンドウからタッチできない問題もPortholeが解決します。

Facebookアプリの場合でも子フレームが自分のウィンドウサイズを親ウィンドウに伝えて、それによってサイズを自動変更しています。ブラウザの制約によってセキュリティが担保されて安心して使える一方、その制限を超えてデータを受け渡せるようにする技術も存在するのです。

Porthole by ternarylabs

Porthole Demo

ternarylabs/porthole · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2