AdobeAirの最近のブログ記事

AirアプリにロードしたhtmlのJavaScriptを実行する

AdobeAirで作成したアプリケーション上にロードしたhtml内のJavaScriptを
Air側から実行する方法が分からず、割とハマったので早速覚書です。

今回作成したサンプルは、外部のhtmlを読み込みアプリケーション内のボタンをクリックすると
ロードしたhtml内のJavaScriptのコードが実行されるAirアプリケーションです

J-110622-1.jpg

<Airアプリ内にロードしたhtml(flexアプリ)>
J-110622-2.jpg
html側で"callbackFlexFunc()"というメソッドを定義しており、
実行されるとFlexアプリケーションに 値をコールバックします。

<sampleFlex.mxml>

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="300" height="100"
			   creationComplete="application1_creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				ExternalInterface.addCallback("callBackFunc",
					function(args:String):void
					{
						txi.text = args;
					});
			}

		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	</fx:Declarations>
	
	
	<s:Panel x="0" y="0" width="100%" height="100%" title="SampleWebApp">
		<s:Label x="10" y="10" text="JavaScriptからの戻り値"/>
		<s:TextInput id="txi" editable="false" x="10" y="30" width="278" />
	</s:Panel>
</s:Application>


<JavaScript ※index.template.html>

function getHtmlString()
{
  ${application}.callBackFunc(swfVersionStr);
}
 

<Airアプリケーション>

J-110622-3.jpg

<SampleAir.mxml>

<!--?xml version="1.0" encoding="utf-8"?-->
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx" width="310" height="200">

	<fx:Script>
		<![CDATA[
			protected function executeBtn_clickHandler(event:MouseEvent):void
			{
				// ロードしたhtmlのJavaScriptを実行する
				myHtml.domWindow.callbackFlexFunc();
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	</fx:Declarations>
	
	<mx:HTML id="myHtml" width="100%" height="150" 
			 location="htmlのパス"/>
	<s:Button id="executeBtn" x="119" y="154" label="実行" click="executeBtn_clickHandler(event)"/>
	
</s:WindowedApplication>

<mx:HTML>の"domWindow"プロパティにアクセスする事で、
ロードしたhtml内に定義されるJavaScriptにアクセスする事が可能となります。

変数ビューで確認すると、"callbackFlexFunc"が定義されている事が分かります。

J-110622-5.jpg

JavaScriptへのアクセスというと"ExternalInterface"がおなじみですが、 どうやらAirでは対応していないようです。
ExternalInterface非対応という事で、JavaScriptへのアクセスを諦めようかと思いましたが、こんなに素晴らしい事が出来るとは思いませんでした。
いえ、、勉強不足ですね。精進しようと思います。

1

このブログについて

このブログは吉祥寺にあるブレインチャイルド株式会社の社員で投稿しています。
業務ではまってしまったことや発見したこと。
自分達で新たに学習してみようと思って勉強し始めたことなどを綴っています。
こんな社員が働いているブレインチャイルドに興味がわいててきたなら、是非お問い合わせください。
会社案内
求人案内
先輩のコメント