ExternalInterface.addCallbackで要注意な件メモ
ちょっと前の記事で触れたExternalInterfaceですが、addCallbackメソッドで要注意な件についてメモっておこうと思います。
ExternalInterfaceはホントに罠が多いですよ！！
まぁ正直、ExternalInterfaceにっていうより、IEに多いんですけど・・・。
javascriptと連携するために重要なメソッドですが・・・使いやすい反面、ホントによく躓きます。
ではまず基本から。
AS2.0以前は引数が3あったようなんですが（2は触ったことが無いので良く知りません）3.0では2つになっています。
まず、Flash側から。
import部分は省いて・・・
----------------------------
//SWFファイルをHTMLとは別ドメインのサーバにおく場合は必須
Security.allowDomain("*");
//このtextfieldのテキストをjavascriptから操作します。
var tf:TextField = TextField(addChild(new TextField));
tf.text = "ここのテキストが変化します";
tf.autoSize = "left";
function textChange(msg:String = "hello addcallback!"):void{
//textfieldのテキストに引数を代入
tf.text = msg;
}
//↑の関数textChangeをjsSideという名前でjavascriptに登録
ExternalInterface.addCallback("jsSide", textChange);
----------------------------
つぎにHTML側。
おさらいになりますが、Flashの埋め込みタグは
----------------------------
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="SWFファイルの幅" height="SWFファイルの高さ" id="好きなID" align="middle">
<param name="wmode" value="opaque" />
<param name="allowScriptAccess" value="always" />
<param name="movie" value="SWFファイルのURL" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="SWFファイルのURL" wmode="opaque" quality="high" bgcolor="#ffffff" width="150" height="60" name="objectタグのID" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
----------------------------
次にボタンを作ってトリガーにします。
----------------------------
<button onclick="pushed()">addCallback</button>
----------------------------
最後にjavascript
----------------------------
function pushed(){
//document['objectタグのid'].flashで登録した関数名
document['aexternala'].jsSide();
}
----------------------------
これでボタンをクリックしたら、flash側のテキストの表示が変わるはずです。
ところが、問題はまだありまして・・・
IE7以前だとdocument['objectタグのid']が無効
またもやIEかっ！という感じですが。
主要ブラウザでいえば、
document['objectタグのid'].関数名 が使える … firefox、chrome、IE8
window['objectタグのid'].関数名 が使える … IE6、IE7、IE8
IE8のみどちらも有効って感じです。
adobeの公式リファレンスガイドではIEかそうでないかで分岐させています。
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];//IEならこっち
} else {
return document[movieName];//IE以外ならこっち
}
}
IEが9になって、もしもdocument～に統一されたら判別ややこしいぞこれは・・・！
IEではbody.onload時（つまりDOMContentLoaded時）に読み込まれていないswfファイルと通信できない
DOMを完全に読み込んだ後でjavascriptなどで動的に読み込んだswfファイルはIEのみ通信できないみたいです。
まったくIEってやつはっ！！！！
これは地味に不便すぎる。。。
IEだとformタグ内のswfファイルは通信不可
まぁこれはそうせざるを得ない場面が少なそう。
IEだと登録できる関数が1000個まで
flashを利用してjavascript命令を拡張！とか考えても、1000個までしかできません。残念！
それ以降はundefinedになってしまうようです。
IEだとExternalInterface.call実行中はaddCallbackは使えない
逆に、addCallbackで呼び出したメソッドの中でExternalInterface.callは使えます。
これもそんなには影響なし、かな・・・？
しかし、IEはホントにいいところなしですね。
ディペロッパにとっても、ユーザーにとってもね・・・。
ではまず基本から。
AS2.0以前は引数が3あったようなんですが（2は触ったことが無いので良く知りません）3.0では2つになっています。
まず、Flash側から。
import部分は省いて・・・
----------------------------
//SWFファイルをHTMLとは別ドメインのサーバにおく場合は必須
Security.allowDomain("*");
//このtextfieldのテキストをjavascriptから操作します。
var tf:TextField = TextField(addChild(new TextField));
tf.text = "ここのテキストが変化します";
tf.autoSize = "left";
function textChange(msg:String = "hello addcallback!"):void{
//textfieldのテキストに引数を代入
tf.text = msg;
}
//↑の関数textChangeをjsSideという名前でjavascriptに登録
ExternalInterface.addCallback("jsSide", textChange);
----------------------------
つぎにHTML側。
おさらいになりますが、Flashの埋め込みタグは
----------------------------
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="SWFファイルの幅" height="SWFファイルの高さ" id="好きなID" align="middle">
<param name="wmode" value="opaque" />
<param name="allowScriptAccess" value="always" />
<param name="movie" value="SWFファイルのURL" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="SWFファイルのURL" wmode="opaque" quality="high" bgcolor="#ffffff" width="150" height="60" name="objectタグのID" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
----------------------------
次にボタンを作ってトリガーにします。
----------------------------
<button onclick="pushed()">addCallback</button>
----------------------------
最後にjavascript
----------------------------
function pushed(){
//document['objectタグのid'].flashで登録した関数名
document['aexternala'].jsSide();
}
----------------------------
これでボタンをクリックしたら、flash側のテキストの表示が変わるはずです。
ところが、問題はまだありまして・・・
IE7以前だとdocument['objectタグのid']が無効
またもやIEかっ！という感じですが。
主要ブラウザでいえば、
document['objectタグのid'].関数名 が使える … firefox、chrome、IE8
window['objectタグのid'].関数名 が使える … IE6、IE7、IE8
IE8のみどちらも有効って感じです。
adobeの公式リファレンスガイドではIEかそうでないかで分岐させています。
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];//IEならこっち
} else {
return document[movieName];//IE以外ならこっち
}
}
IEが9になって、もしもdocument～に統一されたら判別ややこしいぞこれは・・・！
IEではbody.onload時（つまりDOMContentLoaded時）に読み込まれていないswfファイルと通信できない
DOMを完全に読み込んだ後でjavascriptなどで動的に読み込んだswfファイルはIEのみ通信できないみたいです。
まったくIEってやつはっ！！！！
これは地味に不便すぎる。。。
IEだとformタグ内のswfファイルは通信不可
まぁこれはそうせざるを得ない場面が少なそう。
IEだと登録できる関数が1000個まで
flashを利用してjavascript命令を拡張！とか考えても、1000個までしかできません。残念！
それ以降はundefinedになってしまうようです。
IEだとExternalInterface.call実行中はaddCallbackは使えない
逆に、addCallbackで呼び出したメソッドの中でExternalInterface.callは使えます。
これもそんなには影響なし、かな・・・？
しかし、IEはホントにいいところなしですね。
ディペロッパにとっても、ユーザーにとってもね・・・。