Nylon iframe

Nylon iframeとは

昨日の日記に続いてXDMの話です．Nylonの仕組みを拡張して，iframeを超えてメッセージセンディングを行うモジュールを開発しました．プログラムはgithubで公開しています．

Nylon iframeの使い方

まずはNylonとnylon.iframe_parentを初期化します．idがdestFrameのiframeに，localhost配下のhtmlを読み込んでいるものとします．その場合の初期化は以下のように行います（変数名は手抜きです）．通常，onloadイベント内に記述してください．

同様に子フレーム側でもnylon.iframe_childの初期化を行い，onconnectメソッドで接続時の関数を定義します．親フレームから接続されると，自動的にonconnectメソッドが呼び出されるので，その中でイベント受信時のコードを記述します．

このとき，フレーム間の通信は以下のように行います．

この通信内容は，お互いのフレームだけでなく，タグ"test"を受信する他のNylonモジュールにも伝達されます．このような作りになっているので，iframeの有無に寄らず動作するモジュールを開発することが可能です．

ソースコード

Nylon iframeによる，親子フレーム間で通信を行うサンプルを以下に示します．まずは親フレームです．好きな名前で保存してください．localhost以外のサーバに置く場合は17行目を変えてください．なお，通信相手のサーバのチェックは，17行目の第2パラメータに基づいて自動的に行われます．

続いて子フレームです．ファイル名はframe2.htmlで保存してください．ファイル名を変えたい場合は，親フレーム側の12行目を変更してください．さて，親フレーム側と同様，通信相手のチェックは自動的に行われます．Nylon iframeでは始めに接続してきたフレームのサーバ情報を記録しておき，そのサーバ以外からの通信であれば自動的に無視するようにしています．

これにより，子フレーム側はどのWebページから呼び出されても動作します．これは部品化（ガジェット化）を容易にするための仕様です．そのため，onconnectメソッドが存在し，少々トリッキーではありますが，利便性とセキュリティを確保しています．

Nylon iframeにより，iframe間の通信が容易になりました．しかも，何らかの機能がiframe上にあっても親フレームにあっても利用できます．これにより，機能のモジュール化が進み，最終的にモジュールを組み合わせたWebシステム開発が楽になります．

ツイート