読者です 読者をやめる 読者になる 読者になる

ExternalInterfaceのはまりどころを再検証

ExternalInterfaceがはまることに関しては周知の事実なんですが、その内容に関しては又聞きの部分も多かったので改めて検証してみました(windows vista IE7,FF2,safari3.1、windows xp IE6で確認しています)

form tagの中にswfを書き出すとIEでelementが取得できない。 対象ブラウザ:IE6,7 表示されるエラー:エラー:'swf_id' は Null またはオブジェクトではありません。 回避策


document.getElementById('form_in_swf').external_func('call');
or
$('#form_in_swf').get(0).external_func('call');
(jQuery)
or swfobject.getObjectById('form_in_swf').external_func('call'); (swfobject ver2)

2008/07/15 本家のdocumentsにFor static publishing onlyと書いてあったので削除します。手元で検証した範囲ではdynamic publishingでもうまくいってたんですが。。。

関連情報 Using ExternalInterface within a
tag causes communication between JavaScript and ActionScript to fail

swf tagのIDに*external*が入ってないとreturn valueが取れない。 対象ブラウザ:IE6 表示されるエラー:なし(ExternalInterface.addCallbackでreturnしてもundefinedになる) 回避策:swf elementのidにexternalを入れる

object tagにidとnameが指定されているとIDが取得できない。 対象ブラウザ:FF2 表示されるエラー:function_name is not a function 回避策:SWFObjectを使う(ブラウザにあわせて出力タグを変える)

swf tagがdisplay:none(or visibility:hidden)だとcallできない。 対象ブラウザ:IE6,7,FF2,safari3.1 表示されるエラー:function_name is not a function 回避策:width="1" height="1"で出力する。 (FF2はwidthかheightのいずれかが0で出力した場合callできない) または、以下の方法で非表示にする。


setTimeout(function () {
    $('#swf_id').css({'visibility':'hidden'});
},0);

再読み込みを行うとExternalInterface.addCallback前でもfunctionがtrueになる。 対象ブラウザ:safari3.1 表示されるエラー:なし($('#swf_id').get(0).func_nameがtrueになる) 回避策:別に検証用のmethodを登録し確認する または、以下のような手法で検証する(若干乱暴ですが)


var max_retry = 30;
var self = this;
var swf_id = 'swf_id';
var method = 'func_name';
setTimeout(function () {
    if (!max_retry--) return;
    var swf = swfobject.getObjectById(swf_id);
    try {
        swf[method]();
    } cache (e) {
        setTimeout(arguments.callee, 50);
    }
}, 0);

いったんdisplay、visibilityを変更するとExternalInterfaceが呼べなくなる 対象ブラウザ:IE6 表示されるエラー:なし(エラー表示なしに呼べないだけ) 回避策:display、visibilityを変更しない (margin-topを-1000pxに設定する等で回避)

ExternalInterfaceに限った話なんですが、結構ありますね。また、ExternalInterface以外のはまりどころをまとめてみたいと思います