IFRAME で埋め込んだ外部コンテンツから情報を取得する事ができる postMessage インターフェイス

カラーピッカーのライブラリなのですが、ちょっと雑な作りだったので、修正してリリースです。
で紹介したカラーピッカーを http://toolbox.winofsql.jp/color_picker.htm としてホステ
ィングしました。通常ならば、この中で決定した色コードを取得する事はできませんが、
postMessage で親ウインドウに色コードを post するようにしたので、利用する場合は、
その受け取りコードを書くだけで利用可能です。

<script type="text/javascript">
function get_post_message(e) {
	var result = eval(e.data);
	alert(result.rgb + "," + result.hsv.h + "," + result.hsv.s + "," + result.hsv.v );
}
if ( window.addEventListener ) {
	window.addEventListener('message',get_post_message, false);
}
else {
	window.attachEvent('onmessage',get_post_message);
}

</script>
<iframe
	src="http://toolbox.winofsql.jp/color_picker.htm"
	name="myframe"
	frameborder="1"
	scrolling="no"
	width="340"
	height="390"
></iframe>

関連する記事

JS : クロスドメインの IFRAME からデータを JSON 形式で引き渡す

JavaScript コンテンツ

jQuery の ajax でアクセス可能なデータをボタンをクリックした後 window.open で開いたウインドウの中にテキストエリアを作成して表示する方法

IFRAME を ブラウザのサイズ変更時のイベントでコントロールして、HTML5で廃止された FRAME と同様に使うサンプル

JavaScript : DIV 内に時間範囲のボックスを表示する処理

jQuery/JavaScript : 存在しない可能性のある画像の代替表示

JavaScript による、時間範囲の表現( 出退勤等 )

JavaScript : HTML 特殊文字を書き出すコード( ツール )

Twitter 縦書き intent

スマホでYouTubeの埋め込みの表示サイズをJavaScriptでコントロールする

WEB フォントを使った「フェードイン、フェードアウト」

JS : テキストエリア内の選択文字列の置き換え

IE限定、ローカルファイル参照フィールドを使ったトリック