Flex からの JavaScript 関数へのアクセス
HTML ページに含まれる JavaScript 関数は、Flex アプリケーションから呼び出すことができます。Flex とブラウザとの通信を可能にすることにより、スタイル設定の変更、リモートプロセスの起動、またはページのスクリプト内部から通常実行できる他の処理を実行できます。
Flex アプリケーションから、JavaScript 関数を含む HTML ページにデータを渡し、データを処理してから Flex アプリケーションにデータを戻すこともできます。これを行うには、ExternalInterface API または navigateToURL() メソッドを使用します。詳細については、ExternalInterface API を使用した Flex から JavaScript へのアクセスおよびFlex での navigateToURL() メソッドの使用を参照してください。
関数を含むページと通信する際には、実行する動作すべてをブラウザが処理できるかどうかを判別する必要があります。したがって、使用するオブジェクトがブラウザでサポートされているかどうかを最初に判別する必要があります。ブラウザによるサポートを判別するための一般的なガイドラインの詳細については、ExternalInterface API を使用した Flex から JavaScript へのアクセスを参照してください。
ExternalInterface API を使用した Flex から JavaScript へのアクセス
Flex アプリケーションから JavaScript 関数を呼び出す最も簡単な方法は、ExternalInterface API を使用することです。この API を使用すると、ラッパーで任意の JavaScript メソッドを呼び出し、パラメータを渡し、戻り値を取得することができます。メソッドの呼び出しが失敗した場合は、例外が返されます。
ExternalInterface API では、ブラウザサポートの確認がカプセル化されており、メソッドを使用するときにサポートを確認する必要はありません。ただし、available プロパティを使用すれば、ブラウザがインターフェイスをサポートしているかどうかを確認することができます。詳細については、ExternalInterface API についてを参照してください。
ExternalInterface API は、単一のクラス flash.external.ExternalInterface で構成されています。このクラスには静的な call() メソッドがあり、このメソッドを使用すると JavaScript と Flash の通信が容易になります。ExternalInterface API の addCallback() メソッドを使用して、ラッパーから Flex アプリケーション内のメソッドを呼び出すこともできます。詳細については、addCallback() メソッドについてを参照してください。
ExternalInterface を使用するには、HTML ページで id プロパティと name プロパティを呼び出し可能にする必要があります。詳細については、Flex アプリケーションの id プロパティと name プロパティの編集を参照してください。
Flex アプリケーションからの JavaScript メソッドの呼び出し
ExternalInterface API を使用すると、簡単にラッパー内のメソッドを呼び出すことができます。使用できる静的な call() メソッドのシグネチャを次に示します。
flash.external.ExternalInterface.call(function_name:String[, arg1, ...]):Object;
function_name は、HTML ページの JavaScript で使用されている関数名です。引数は、JavaScript 関数に渡す引数です。カンマで区切る従来の方法を使用して 1 つ以上の引数を渡すことも、ブラウザで非直列化されるオブジェクトを渡すこともできます。この引数はオプションです。
次のスクリプトブロックの例では、call() メソッドを使用して、JavaScript の changeDocumentTitle() 関数を、それが含まれるラッパー内で呼び出します。
<?xml version="1.0"?>
<!-- wrapper/WrapperCaller.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
import flash.external.*;
public function callWrapper():void {
var s:String;
if (ExternalInterface.available) {
var wrapperFunction:String = "changeDocumentTitle";
s = ExternalInterface.call(wrapperFunction,ti1.text);
} else {
s = "Wrapper not available";
}
trace(s);
}
</mx:Script>
<mx:Form>
<mx:FormItem label="New Title:">
<mx:TextInput id="ti1"/>
</mx:FormItem>
</mx:Form>
<mx:Button label="Change Document Title" click="callWrapper()"/>
</mx:Application>
HTML ページで、他の JavaScript 関数と同じように関数を定義します。次に示す例のように、値を返すことができます。
<html><head>
<title>wrapper/WrapperBeingCalled.html</title>
</head>
<body scroll='no'>
<SCRIPT LANGUAGE="JavaScript">
function changeDocumentTitle(a) {
window.document.title=a;
alert(a);
return "successful";
}
</SCRIPT>
<h1>Wrapper Being Called</h1>
<table width='100%' height='100%' cellspacing='0' cellpadding='0'>
<tr>
<td valign='top'>
<object id='mySwf' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab' height='200' width='400'>
<param name='src' value='WrapperCaller.swf'/>
<param name='flashVars' value=''/>
<embed name='mySwf' src='WrapperCaller.swf' pluginspage='http://www.adobe.com/go/getflashplayer' height='100%' width='100%' flashVars=''/>
</object>
</td>
</tr>
</table>
</body></html>
ExternalInterface の call() メソッドを使用するには、埋め込まれた Flex アプリケーションの名前がラッパー内に必要です。このため、<object> タグで id 属性を、<embed> タグで name 属性を定義する必要があります。設定されていない場合、Flex アプリケーションの呼び出しまたは Flex アプリケーションからの呼び出しは成功しません。
call() メソッドは 0 個以上の引数を受け入れます。ActionScript 型も、この引数として可能です。ActionScript 型は、Flex によって JavaScript の数値およびストリングとして直列化されます。オブジェクトを渡す場合、JavaScript 内の非直列化オブジェクトのプロパティにアクセスできます。次に例を示します。
<?xml version="1.0"?>
<!-- wrapper/DataTypeSender.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import flash.external.*;
public function callWrapper():void {
var s:String;
if (ExternalInterface.available) {
var o:Object = new Object();
o.fname = "Nick";
o.lname = "Danger";
var wrapperFunction:String = "receiveComplexDataTypes";
s = ExternalInterface.call(wrapperFunction, o);
} else {
s = "Wrapper not available";
}
trace(s);
}
]]></mx:Script>
<mx:Button label="Send" click="callWrapper()"/>
</mx:Application>
Flex で直列化されるのは、静的ではないパブリック変数と、ActionScript オブジェクトの読み取りおよび書き込み可能なプロパティだけです。数値およびストリングは、オブジェクトのプロパティとして渡すことも、プリミティブ型や配列のような単純オブジェクトとして渡すことも、単純オブジェクトの配列として渡すこともできます。
JavaScript コードは、次の例に示すように、オブジェクトのプロパティにアクセスできます。
<html><head>
<title>wrapper/DataTypeWrapper.html</title>
</head>
<body scroll='no'>
<SCRIPT LANGUAGE="JavaScript">
function receiveComplexDataTypes(o) {
alert("Welcome " + o.fname + " " + o.lname + "!");
return "successful";
}
</SCRIPT>
<h1>Data Type Wrapper</h1>
<table width='100%' height='100%' cellspacing='0' cellpadding='0'>
<tr>
<td valign='top'>
<object id='mySwf' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab' height='200' width='400'>
<param name='src' value='DataTypeSender.swf'/>
<param name='flashVars' value=''/>
<embed name='mySwf' src='DataTypeSender.swf' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' height='100%' width='100%' flashVars=''/>
</object>
</td>
</tr>
</table>
</body></html>
次の例のように、オブジェクト内にオブジェクトを埋め込むこともできます。例えば、オブジェクトを、オブジェクト内の配列として埋め込むことができます。Flex アプリケーションの <mx:Script> ブロックに次のコードを追加します。
<?xml version="1.0"?>
<!-- wrapper/ComplexDataTypeSender.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import flash.external.*;
public function callWrapper():void {
var s:String;
if (ExternalInterface.available) {
var o:Object = new Object();
o.fname = "Nick";
o.lname = "Danger";
o.b = new Array("DdW","E&T","LotR:TS");
var wrapperFunction:String = "receiveComplexDataTypes";
s = ExternalInterface.call(wrapperFunction, o);
} else {
s = "Wrapper not available";
}
trace(s);
}
]]></mx:Script>
<mx:Button label="Send" click="callWrapper()"/>
</mx:Application>
このコードは、次のラッパー内で JavaScript 関数をトリガします。
<html><head>
<title>wrapper/ComplexDataTypeWrapper.html</title>
</head>
<body scroll='no'>
<SCRIPT LANGUAGE="JavaScript">
function receiveComplexDataTypes(o) {
// Get value of fname and lname properties.
var s = ("Welcome " + o.fname + " " + o.lname + "!\n");
// Iterate over embedded object's properties.
for (i=0; i<o.b.length; i++) {
s += o.b[i] + "\n";
}
alert(s);
}
</SCRIPT>
<h1>Complex Data Type Wrapper</h1>
<table width='100%' height='100%' cellspacing='0' cellpadding='0'>
<tr>
<td valign='top'>
<object id='mySwf' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab' height='200' width='400'>
<param name='src' value='ComplexDataTypeSender.swf'/>
<param name='flashVars' value=''/>
<embed name='mySwf' src='ComplexDataTypeSender.swf' pluginspage='http://www.adobe.com/go/getflashplayer' height='100%' width='100%' flashVars=''/>
</object>
</td>
</tr>
</table>
</body></html>
Flex と Flash Player には、強力なセキュリティ機能が内蔵されており、サイト間のスクリプティングを防ぐことができます。デフォルトでは、HTML ページが Flex アプリケーションと同じドメインにない場合、HTML ページ上のスクリプトを呼び出すことができません。ただし、スクリプトが呼び出されるソースを展開できます。詳細については、Flex における ExternalInterface API セキュリティについてを参照してください。
循環参照が含まれるオブジェクトや配列を渡すことはできません。例えば、次のオブジェクトを渡すことはできません。
var obj = new Object(); obj.prop = obj; // Circular reference.
循環参照は、ActionScript と JavaScript の両方で無限ループになります。
Flex での navigateToURL() メソッドの使用
navigateToURL() メソッドは特定の URL からウィンドウにドキュメントをロードしたり、定義済みの URL にある別のアプリケーションに変数を渡します。このメソッドを使用して、Flex アプリケーションが記述されている HTML ページで JavaScript 関数を呼び出すことができます。
navigateToURL() メソッドの機能を、URLLoader クラスの load() メソッドと混同しないでください。URLLoader クラスは、指定された URL を ActionScript による操作のためにオブジェクトにロードします。navigateToURL() メソッドは、指定された URL にブラウザで移動します。
多くの場合、Flex とラッパーの間で通信を行うには ExternalInterface API を使用する必要がありますが、navigateToURL() メソッドは ExternalInterface API の一部ではないので、このメソッドに対するブラウザサポートの厳密な要件はありません。それらの要件については、ExternalInterface API についてで説明しています。
navigateToURL() メソッドは、SWF ファイルが実行されているセキュリティサンドボックスによって制限されます。この API を使用できるかどうかは、allowScriptAccess および allowNetworking パラメータで定義されるドメインベースのセキュリティ制限に依存します。allowScriptAccess および allowNetworking パラメータの値を SWF ファイルのラッパーで設定します。
これらのパラメータの詳細については、『Adobe Flex 3 アプリケーションの構築とデプロイ』のラッパーの作成セキュリティ制限の詳細については、『Adobe Flex 3 アプリケーションの構築とデプロイ』のFlex へのセキュリティの適用
navigateToURL() メソッドのシンタックス
navigateToURL() メソッドは、flash.net パッケージにあります。シグネチャは次のとおりです。
navigateToURL(request:URLRequest, window:String):void
request 引数は、移動先を指定するURLRequest オブジェクトです。window 引数には、新規ブラウザウィンドウを起動するか、新規 URL を現在のウィンドウにロードするかを指定します。次の表で、window 引数の有効な値について説明します。
|
値 |
内容 |
|---|---|
| _self |
現在のウィンドウ内の現在のフレームを指定します。 |
| _blank |
新規ウィンドウを指定します。この新規ウィンドウは、クライアントのブラウザ内でポップアップウィンドウとして機能します。したがって、ポップアップブロッカーによりロードできない場合があることに注意してください。 |
| _parent |
現在のフレームの親を指定します。 |
| _top |
現在のウィンドウ内の最上位のフレームを指定します。 |
URLRequest オブジェクトを navigateToURL() メソッドに渡します。このオブジェクトは、要求のメソッド URL ターゲット、メソッド（POST または GET）、ウィンドウ、およびヘッダを定義します。次の例では、移動先の単純な URL を定義しています。
<?xml version="1.0"?>
<!-- wrapper/SimplestNavigateToURL.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import flash.net.*;
public function openNewWindow(event:MouseEvent):void {
var u:URLRequest = new URLRequest("http://www.adobe.com/flex");
navigateToURL(u,"_blank");
}
]]></mx:Script>
<mx:Button label="Open New Window" click="openNewWindow(event)"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
navigateToURL() メソッドは、url 引数の値を URL エンコードします。
URLRequest オブジェクトと共にデータを送信するために、要求ストリングに変数を追加できます。次の例では、新規ウィンドウを起動し、検索語句を URL に渡します。
<?xml version="1.0"?>
<!-- wrapper/SimpleNavigateToURL.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import flash.net.*;
public function executeSearch(event:MouseEvent):void {
var u:URLRequest = new URLRequest("http://www.google.com/search?hl=en&q=" + ta1.text);
navigateToURL(u,"_blank");
}
]]></mx:Script>
<mx:TextArea id="ta1"/>
<mx:Button label="Search" click="executeSearch(event)"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
ストリングを追加する以外に、URLRequest の data プロパティを使用して GET または POST 要求に URL 変数を追加することができます。クエリ文字列パラメータは URLVariables タイプです。Flex では、アンパサンド区切り文字が URL 要求ストリングに追加されます。次の例では、name=fred を URLRequest に追加します。
<?xml version="1.0"?>
<!-- wrapper/NavigateWithGetMethod.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import flash.net.*;
public function openNewWindow(event:MouseEvent):void {
var url:URLRequest = new URLRequest("http://mysite.com/index.jsp");
var uv:URLVariables = new URLVariables();
url.method = "GET";
uv.name = "fred";
url.data = uv;
navigateToURL(url,"_blank");
}
]]></mx:Script>
<mx:Button label="Open New Window" click="openNewWindow(event)"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
URLRequest オブジェクトと共に POST データを使用するには、URLRequest オブジェクトの method プロパティの値を POST に設定します。
navigateToURL() メソッドを使用して複数ウィンドウを開く
navigateToURL() メソッドを呼び出すことにより、任意の数の新規ブラウザウィンドウを開くことができます。ただし、ActionScript は非同期なので、このメソッドの単純なループを試みたときに Flash Player でブラウザウィンドウが開かれるのは、最後の呼び出しに対してのみです。これを回避するには、callLater() メソッドを使用します。このメソッドは、アプリケーションの新しいフレームごとに新規ブラウザウィンドウを開くよう Flash Player に指示します。次の例では、callLater() メソッドを使用して複数のブラウザウィンドウを開き、その際に navigateToURL() メソッドを指定します。
<?xml version="1.0"?>
<!-- wrapper/NavigateToMultipleURLs.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="openWindows(0)">
<mx:Script><![CDATA[
import flash.net.navigateToURL;
private var listingData:Array=[
"http://www.google.com",
"http://www.adobe.com",
"http://www.usatoday.com"
];
private function openWindows(n: Number):void {
if (n < listingData.length) {
navigateToURL(new URLRequest(listingData[n]), '_blank');
callLater(callLater, [openWindows, [n+1]]);
}
}
]]></mx:Script>
</mx:Application>
URLRequest オブジェクトを使用した JavaScript 関数の呼び出し
JavaScript 関数をメソッドの 1 番目のパラメータに埋め込むことにより、URLRequestを使用してこの関数を呼び出すことができます。次に例を示します。
public var u:URLRequest = new URLRequest("javascript:window.close()");
上記のコードがすべてのブラウザで動作するとは限りません。ブラウザのタイプを検出し、そのタイプに応じてウィンドウを閉じるコードを追加する必要があります。また、Internet Explorer などの一部のブラウザでは、JavaScript を含む URLRequest を呼び出す際に予測しない動作が起こることがあります。次に例を示します。
- JavaScript URL を非同期で実行します。つまり、JavaScript メソッドの実行を試行中の navigateToURL() メソッドを複数回呼び出すことができますが、実行されるのは最後の呼び出しのみです。各呼び出しは次の呼び出しで上書きされます。
- JavaScript URL を呼び出すときに、イメージや IFRAME のロードなど、他のすべてのナビゲーションを停止します。
- URL にアンパサンド（&）や疑問符（?）記号が含まれている場合に、セキュリティ警告ダイアログボックスが表示されます。
navigateToURL() メソッドを使用した JavaScript の呼び出し
navigateToURL() メソッドを使用して、Flex アプリケーションが実行されている HTML ページ上の JavaScript 関数を呼び出すことができます。ただし、navigateToURL() メソッドを使用してパラメータを渡す場合、各パラメータを引用符で囲む必要があります。次に例を示します。
<?xml version="1.0"?>
<!-- wrapper/CallingJavaScriptWithNavigateToURL.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import flash.net.*;
public function callWrapper(e:Event):void {
var eType:String = String(e.type);
var eName:String = String(e.currentTarget.id);
var u:URLRequest = new URLRequest("javascript:catchClick('"
+ eName + "','" + eType + "')");
navigateToURL(u,"_self");
}
]]></mx:Script>
<mx:Button id="b1" click="callWrapper(event)" label="Call Wrapper"/>
</mx:Application>
次の例のように、周りを囲む HTML ラッパーにはこの呼び出しを処理するための JavaScript が含まれます。
<html><head>
<title>wrapper/NavigateToURLWrapper.html</title>
</head>
<body scroll='no'>
<SCRIPT LANGUAGE="JavaScript">
function catchClick(name, type) {
alert(name + " triggered the " + type + " event.");
}
</SCRIPT>
<h1>Navigate To URL Wrapper</h1>
<table width='100%' height='100%' cellspacing='0' cellpadding='0'>
<tr>
<td valign='top'>
<object id='mySwf' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab' height='200' width='400'>
<param name='src' value='CallingJavaScriptWithNavigateToURL.swf'/>
<param name='flashVars' value=''/>
<embed name='mySwf' src='CallingJavaScriptWithNavigateToURL.swf' pluginspage='http://www.adobe.com/go/getflashplayer' height='100%' width='100%' flashVars=''/>
</object>
</td>
</tr>
</table>
</body></html>
navigateToURL() メソッドは、URLRequest 自体の基本 JavaScript 関数に対して使用することもできます。例えば、次の 1 行のコードでデフォルトの電子メールクライアントを起動できます。
<?xml version="1.0"?>
<!-- wrapper/EmailWithNavigateToURL.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
import flash.net.*;
public function sendMail(e:Event):void {
var u:URLRequest = new URLRequest("mailto:" + ti1.text);
navigateToURL(u,"_self");
}
</mx:Script>
<mx:Button id="b1" click="sendMail(event)" label="Send Mail"/>
<mx:Form>
<mx:FormItem>
<mx:Label text="Email Address: "/>
</mx:FormItem>
<mx:FormItem>
<mx:TextInput id="ti1"/>
</mx:FormItem>
</mx:Form>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
すべてのブラウザが navigateToURL() メソッドによる javascript プロトコルの呼び出しをサポートしているとは限りません。可能な場合は、ExternalInterface API の call() メソッドを使用して、HTML ページ内の JavaScript メソッドを呼び出してください。詳細については、ExternalInterface API を使用した Flex から JavaScript へのアクセスを参照してください。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート