enchant.jsのLabelには、HTMLタグを使用したテキストをtextプロパティに設定できます。
それならばhtmlファイルごと読み込ませて、ついでにCSSまで適用できないものかなと考えました。
Labelのtextプロパティを以下のようにして、
label.text = '<div id="contentsBox" style="width:100%; height:100%;"></div>';
そして、JQueryで以下のように、contentsBox に hoge.html を読み込ませています。
$('#contentsBox').load('./pages/hoge.html',function(response, status, xhr)
ここで、CSSを以下のように入れていたのですが、CSSが適用されませんでした。
再度これらの読み込み処理を行うと、なぜか適用されるのですが、タイミング的なものなのでしょうか？
label.text = '<div id="contentsBox" style="width:100%; height:100%;"><link rel="stylesheet" href="./pages/hoge.css"></div>';
そこで、htmlの読み込みが成功したときに、以下のようにJQueryを使用して挿入するようにしてみました。
$('<link rel="stylesheet" href="./pages/hoge.css">').appendTo("head");
Label生成した後にすぐに scene.addChild(label); で子として追加としていますが、
これは、JQueryからLabelのtextに、コードを流し込む時にSceneの子の状態になってないと、
Label内部での更新が動作しないようだったからです。enchant.jsのソースを見た訳ではないので、
はっきりとはいえないのですが。
以下、参考ソースです。作成中のソースから少し変えただけですので見にくいのですが。
var label = new Label();
scene.addChild(label);
label.visible = false;
label.color = "#000";
label.backgroundColor = "#FFF";
label.text = '<div id="contentsBox" style="width:100%; height:100%;"></div>'
;
$('#contentsBox').load('./pages/hoge.html',function(response, status, xhr){
if (status == "error") {
var msg = "Load Error!!";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}else{
console.log('---Load Complete!!---');
$('<link rel="stylesheet" href="./pages/hoge.css">').appendTo("head");
label.visible = true;
label.addEventListener('touchend',function(e){
scene.removeChild(this);
});
return;
}
});
ちなみにたいしたことではありませんが、htmlファイルやcssファイル、それに含まれる画像ファイルは、
実行しているスクリプトファイルから見ての相対パスなんですよね。
情けないのですが、つい何回も間違えてしまいましたので、自分への戒めもかねて。
