ExternalInterface.addCallbackで要注意な件メモ | Ameblo Hacks ~アメブロを10倍楽しむために努力するブログ~
2010-01-11 16:05:06

ExternalInterface.addCallbackで要注意な件メモ

テーマ:flash(旧)
$meets AS3.0
ちょっと前の記事で触れたExternalInterfaceですが、addCallbackメソッドで要注意な件についてメモっておこうと思います。
ExternalInterfaceはホントに罠が多いですよ!!
まぁ正直、ExternalInterfaceにっていうより、IEに多いんですけど・・・。



madtag

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はホントにいいところなしですね。
ディペロッパにとっても、ユーザーにとってもね・・・。

みーとくんさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

コメント

[コメントする]

Ameba人気のブログ