以下には、lightbox.on.coocan.jp/message_cd.htm をIFRAME で埋め込んでいます。 当然このブログはドメインが違うので、本来ならばアクセスできませんが、postMessage の第二引数に "*" を渡す事によって(本来は個別指定)、 どんなドメインへもメッセージ を送る事ができます。 ( 開発者ツールを開いて実行して下さい : IE8 でも動きます ) ただ、送れるメッセージは文字列で一つだけなので、送り出すほうで JSON の文字列を 用意しておいて、こちら側ではそれを eval して利用しています。お互いのドメインの 管理者か同じまたは信頼し合えるならば、この方法で多くのデータを一度にやりとりで きるはずです。 または、IFRAME 側を、埋め込むだけでどこでも使えるような一つの完全なユニットと して設計する為に必要です。
データを受け取る為の定義(get_post_message) ※ 実際は、js ライブラリ化して、script 要素で読み込めば使えるようにします
<script type="text/javascript">
function get_post_message(e) {
var prop;
var result = eval(e.data);
try {
if ( console.dir ) {
console.dir(result);
}
else {
for( prop in result ) {
console.log(prop+":"+result[prop]);
}
}
}
catch(e){}
}
if ( window.addEventListener ) {
window.addEventListener('message',get_post_message, false);
}
else {
window.attachEvent('onmessage',get_post_message);
}
</script>
<iframe
src="http://lightbox.on.coocan.jp/message_cd.htm"
name="myframe"
frameborder="1"
scrolling="yes"
width="300"
height="100"
></iframe>
ユニット側
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
<script type="text/javascript">
function t_message() {
var value1 = document.getElementById("message1").value;
var value2 = document.getElementById("message2").value;
var objString = '({ "message1": "'+value1+'", "message2": "'+value2+'" })';
parent.postMessage( objString, "*" );
}
</script>
</head>
<body>
<input
type="text"
id="message1"
style='width:200px;'
value="日本語表示1"
/>
<br />
<input
type="text"
id="message2"
style='width:200px;'
value="日本語表示2"
/>
<br />
<input
type="button"
value="post"
onclick='t_message();'
/>
</body>
</html>
|
|
【JavaScript オブジェクトの最新記事】
- JavaScript : window オブジェクトのプロパティとしてグローバル変数を定義する
- ほぼ、Google Chrome 限定ですが Web Speech API の現時点での実装と問題点回避方法
- Google Chrome での音声認識処理
- JavaScript でテーブル要素の td をクリックしてテキストを選択する / Range オブジェクト
- Google Chrome で音声認識の結果をブログの投稿テキストエリアに転送するブックマークレット
- JavaScript の String と Date オブシェクトに、9999/99/99 書式の文字列日付を取り出すメソッドを追加する
- JavaScript オブジェクト作成の４態
- JavaScript の function を new したものが、JSON フォーマットで記述した『Object』と同じである事のテスト
- JavaScript による半角と全角の相互変換(カタカナを除く)完成版
- Three.js で行われている整然としたクラス作成
- JSON オブジェクトの stringify メソッドの第３引数の使い方
- JS : 自分用名前空間を使ってページのロードイベントを登録
- Object.prototype が window オブジェクトに適用されるおはなし
- JavaScript : 右から指定した文字数を取りだす right メソッドを String オブジェクトに追加
- JSON と文字列の関係
- JavaScript : ネームスペースの作成
- JavaScript : HTMLの要素内のイベント記述で複雑な処理を書く方法( 関数を定義したく無い場合 )
- JavaScript : 無名関数(メソッド)の実行
- JavaScript : Numberオブジェクトに16進数文字列に変換して指定した長さで前にゼロを付けるメソッドを追加する
- JavaScript : String オブジェクトの replace メソッドの第二引数に関数を指定する一括置き換え処理
