AIR(HTML)でアプリケーションを作らなくてはならなくなったので、いろいろ勉強中。
 
AIRはHTML/CSS/JSでスタンドアロンアプリケーションが作れる夢の技術(?)
jQueryとかも問題なく使えるので、
マークアップエンジニアや昔でいうところのHTMLコーダーでも
スタンドアロンアプリが作れるし、
私みたいに「は?C++?」「は?JAVA?」「Perl!Perl!」というおめでたいPGでも
スタンドアロンアプリが作れるんだねー!
(てめぇ、Filemakerプラグイン作ってるじゃねぇか!?ゴルァ!!というツッコミはスルーします)
 
ということで、喜んで飛び込んでみたものの、
やはり通常のHTML+JSの感覚で作ると、
うまくいかないところが多い。
Adobeが頭をフル回転させて出た知恵なのか、
めんどくさくなってなんとなく作った仕様なのか
知る由もないが、
独特のセキュリティ制限がかかっている。
 
ということで、今後、AIR(HTML)を作ってく上で、
ハマったところをメモっていくので、読みたい人は勝手に読んでください。
間違ってたら、こちらも仕事で使ってて問題になっては困るので突っ込んでください。
 


今日のハマりポイント。

AJAXを利用して取得した別ファイルのHTMLをinnertHTMLで表示させた場合、
別ファイルのonclickなどのイベントは無効になってしまう仕様。
 
 
↓メインのHTMLファイル

<html>
	<head>
		<script src="AIRAliases.js" type="text/javascript"></script>
		<title>test</title>
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready( function(){
				$.get(
					'load.html',
					{},
					function( html ){
						$('#test').html( html );
					}
				);
			});
		</script>
	</head>
	<body>


<div id="test">
</div>

</body>
</html>

 
 
↓読み込むHTML(ファイル名はload.htmlとする)

<input type="button" name="button" id="button" value="ボタン" onClick="alert('動け!);">

 
jQeuryをつかってDOMがreadyになったとき、「load.html」の内容をメインのHTMLのID「test」のブロックに表示させるという仕組みです。
で、ID「test」のブロックに表示されたボタンをクリックすると「動け!」というalertが発動するという仕組みですね。
 
HTML+JSやったことある人なら、なんとなくわかると思います。
そして、AIRでやったときも、ボタンをおしたとき「動け!」って出る。そんな気がします。
 
が、そうは問屋が卸さないようです。
 
AIRの親衛隊が発動して、別ファイルやサーバーから読み込んだ内容については、
clickなどのイベントが無視されて動かないのです。
(私はそれで半日ハマりました。泣)
 
じゃ、どうしたらいいか。
 
結論を先にいうと、
読み込まれる側のHTMLからonclickなどのイベント属性をすべてとっぱらって、
メインのHTML側で、読み込みと表示が終了したあと、イベントリスナを設定する必要があります。
 
じゃぁ例を。

↓メイン

<html>
	<head>
		<script src="AIRAliases.js" type="text/javascript"></script>
		<title>test</title>
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready( function(){
				$.get(
					'load.html',
					{},
					function( html ){

						$('#test').html( html );

						//↓イベントリスナを設定
						$('#button').click(
								function(){
									alert('動け!');
								}
						);

					}
				);
			});
		</script>
	</head>
	<body>


<div id="test">
</div>

</body>
</html>

 
↓読み込まれるファイル(load.html)

<input type="button" name="button" id="button" value="ボタン">

読み込まれる方からイベントがなくなって、
メインのHTMLでイベントリスナを登録しているのが分かります。
 
こうしないと動いてくれないのです。めんどくせー!!!!
 
まぁセキュアなものをつくるのには必要ですがの。
 
ひとつ気になるのが、こうやってイベントリスナを増やしていく度に、メモリはどうなるのか?ということ。
もしかすると都度すてなきゃだめ??
 
 
今日はここまで。