パンダのメモ帳

技術系のネタをゆるゆると

ExternalInterface.call が IE でうまく動かない

IE AS3 Flash JavaScript jQuery

ActionScript と JavaSciprt の連携は AS3 の ExternalInterface を使うことで実現できる……が、Firefox などのブラウザではうまく動くのに IE で動かそうとするとピクリとも動かない。以下、対策や注意点をメモ。

ExternalInterface についてグーグル先生に聞いてみると以下のような情報が。

つまり、IE で ExternalInterface を使おうとした場合、罠が一杯まってるぞ、ということはよくわかった。以下、上記のページからの情報＋αを簡単にまとめる。

IE ではオブジェクトの取得方法が異なる

仮に swf を読み込む object の ID を「hoge」とした場合、IEとその他のブラウザでは取得方法が異なる。

  • document['hoge'] … firefox、chrome、IE8
  • window['hoge'] …　IE6、IE7、IE8

jQuery 等を使っていればあまり問題にならないかもしれないけど要注意。IE8はどっちでもOKらしい。

IE では動的に object を書き出すとうまく動かない？

今日、swfobject.js などを使って Flash を動的に書き出すなんてめずらしくないけど、IEで JavaScript から動的に object を書き出すと、ExternalInterface による連携がうまくいかない……らしいが、ウチの環境（Win7+IE8+Flash 10）では特に問題にならなかった。

IE では form 要素以下に配置した object と連携できない

これについては未検証。ウチの場合、フォームのコンポーネントとしてSWFを使うシチュエーションがあるので、これが本当だとかなりヤバイ……。

IE では ExternalInterface.call 中に addCallback したコールバックを呼び出せない

ExternalInterface.addCallback() でJavaScript 側に登録した関数は、ExternalInterface.call() で呼び出された関数の処理中は呼び出すことができない。これを解決するには setTimeout() などで別スレッド化する必要がある。

IE では jQuery(elem).html(object) で object を書き出すとうまく動かない

jQuery.swfObject プラグインを使用した場合も同様。IE 以外のブラウザであれば問題ない。以下、対策コード。

// Object要素を直接HTMLで書き込む場合
$('#hoge').html('<object ...>');
// ↓書き換え
$('#hoge')[0].innerHTML = '<object ...>';
// または
$('#hoge').each(function(){ this.innerHTML = '<object ...>'; });

// jQuery.swfObject プラグインを使用する場合
$('#hoge').flash({...});
// ↓書き換え
$('#hoge')[0].innerHTML = $.flash.create({...});
// または
$('#hoge').each(function(){ this.innerHTML = $.flash.create({...}); });

ここまで来ると、まだまだ何かありそうで嫌だなぁ……。