ExternalInterface

lastmod: 2008-11-07 (金) 13:16:49
Tag: flash JavaScript

基本的なこと †

対応ブラウザ †

モダンブラウザは対応。古めのブラウザもわりと動くようだ。

win

IE5.0以降

mac

safari1.3以降

確認時はサーバを介する †

ローカルファイルではうまくいかない（たぶんsecurityの問題。allowDomainとかもあるし）

なので、localhostでやるか、サーバにアップする必要がある。

デバッグプレビュー中ではエラーが出る †

「ExternalInterfaceは使えません」エラーが投げられるので、デバッグできなくなってしまう。なにか対策が必要ぽいけど、めんどくさいな。

AS→JSはExternalInterface.call(functionName:String, ... arguments); †

public static function call(functionName:String, ... arguments):*

argumentsにはArrayやObjectも渡せる

まずavailableで確認する †

ExternalInterface.availableで使えるかどうか確認。

HTML側にJavaScript?を書かずとも、Stringで直書きjsを渡せる。 †

Stringを渡せばうまいこといけるらしい

ExternalInterface.call('function() { alert("unko") }');

てっく煮さんで見たCDATAを使う方法 †

http://tech.nitoyon.com/meltdown/Meltdown.as

var f:String = <><![CDATA[
function(){
   var imgs = document.getElementsByTagName('img');
   for(var i = 0; i < imgs.length; i++){
       imgs[i].style.visibility = 'hidden';
   }
}]]></>;
ExternalInterface.call(f);

JS→ASはaddCallback(functionName:String, closure:Function) †

public static function addCallback(functionName:String, closure:Function):void

as2だと

public static addCallback(methodName:String, instance:Object, method:Function) : Boolean

流れ的には

1. swf側で、interfaceを定義してjs側から見えるようにしておく
2. js側で、該当swf要素を引っこ抜いて、interface定義したメソッドを呼ぶ
3. 動く！

JavaScript?側はgetElementById?は使わずに、adapterをして要素を取得する †

要素を取得→そのswfのinterface登録したメソッドを呼べば答えてくれる。asに渡す引数は普通に渡せる

function callExternalInterface() {
    thisMovie("externalInterfaceExample").goHome(value);
}
//長いので以下の省略版のほうがいいかな。
function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName]
    }
    else {
        return document[movieName]
    }
}
//ワンライナーのほうが気持いいね
function getSwf(id) 
{
	return navigator.appName.indexOf("Microsoft") != -1 ? window[id] : document[id];
}

JS→ASでの関数名は完全に一意のものを使う。同じ関数名があるとハマる。 †

むちゃくちゃハマるポイント。

JavaScript?のfunction名とActionScript?にコールする関数名が同じだと、うんともすんとも言わなくなる。 具体的には

//呼び出し側js。ターゲットとなるswfに対してopenというメソッドを呼ぶ関数。
//JavaScript側の関数とswf側の関数名が同じだとハマる。
//動くマシンと動かないマシンがあることもハマリがわからなくなる原因になる
function open()
{
    var swf = getSWF(SWFID);
    swf.open();
}

クロスドメインするときはセキュリティを解除してあげること †

1. HTMLに追加

   <param name="allowScriptAccess" value="always" />

2. swfに追加

   flash.system.Security.allowDomain(sourceDomain); //ドメインだけsample.comとか書く。http://は不要

JavaScript?側からの呼び出しで参考になる記事 †

http://la.ma.la/blog/diary_200702152107.htm

ExternalInterfaceの活用事例 †

• 同一ページに複数設置したSWFどうしをつなぐ
  • Jack型のブログパーツやバナー広告
  • LocalConnectionでは実現不可能
• HTMLページのURLを取得する
  • ブログパーツなど、外部から呼び出される際にそのページのURLを取得する
    • locationで取得

ExternalInterfaceでハマる †

IE系とFirefox2を確実にクラッシュさせる方法 †

SWF→JSの関数を呼んでいる状態で、SWFをremoveChildすると死ぬ

たぶん、コールスタックの関係でそうなっているんだと思う。ブラウザと密接につながっているからかな。

回避策 †

setTimeoutでSWF→JSのコネクションを切ってから、実処理する

function jsCallBack()
{
   setTimeout(function(){
       var swf = getElementById("swf");
       swf.parentNode.removeChild(swf)
   }, 1);
}

関連ページ

1. とにかくメモ5日前
2. LocalConnection10日前
3. blogparts/クロスブラウザでの注意点471日前
4. IETester477日前