今回はそれを踏まえて、他ファイルのHTMLを表示させてみたいと思います。また、この記事ではprototype.jsを使用してみました。prototypeもGoogle AJAX Libraries APIから呼び出すことが出来ます。
まずは、基になるHTMLがこちらです。これは、本ブログの記事をダウンロードしてきたHTMLです。（外部のサイト（ページ）を引っ張ってくる場合にはクロスドメイン対策を講じる必要があります。）
ブラウザ（Google Chrome）で動作確認すると、自分の環境では問題なく表示されました。コードは次のとおりです。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("prototype", "1.6.0.3");
google.setOnLoadCallback(function() {
Event.observe('ballon_html', 'click', load_html);
function load_html(){
var body_element = new Ajax.Request(
"jquery_24.html",
{
"method": "post",
onComplete: function(html) {
$('BodyElement').innerHTML = html.responseText;
}
}
);
}
});
</script>
（中略）
</head>
<body id="BodyElement">
<input id="ballon_html" type="button" value="表示" />
</body>
</html>HTMLのタグbody以下の情報しか取得できないので、headにて記載されているCSS関連が抜けてしまい、そのままでは見た目的に問題があるので、あらかじめheadの内容はコピペしてしまっています。中略の部分はそのコピペ部分になります。
次に、バルーン内で同じコードを表示させたいと思います。KMZファイルはこちらです。
ブラウザでの確認と違い、スタイルシートが反映されていません。以前、FirefoxやIEで異なる表示をする旨を書きましたが、WebkitベースのChromeでも異なることもあるようです。（原因はよくわかりませんが…）
【参考：KMLリファレンスより】
Google Earth 5.0 では、プレーン テキスト コンテンツの他に、HTML と JavaScript を説明バルーン内に使用できます。description タグのコンテンツは WebKit オープンソース ウェブブラウザ エンジンによってレンダリングされ、WebKit ベースのブラウザで表示するときと同じように表示されます。
というわけで、あらかじめhead部分でCSSを読むというアプローチがダメということで、次はJavaScript（prototype.js）を使ってスタイルを追加するというアプローチを試してみます。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("prototype", "1.6.0.3");
google.setOnLoadCallback(function() {
Event.observe('ballon_html', 'click', load_html);
function load_html(){
var body_element = new Ajax.Request(
"jquery_24.html",
{
"method": "post",
onSuccess :function(html) {
$('BodyElement').innerHTML = html.responseText;
},
onComplete : function(){
var body = $('BodyElement');
Element.setStyle(body, {
'color':'red',
});
}
}
);
}
});
</script>
</head>
<body id="BodyElement">
<input id="ballon_html" type="button" value="表示" />
</body>
</html>HTMLの読み込みが成功（onSuccess）したら、body全体の文字を赤にするというものです。KMZファイルはこちらです。
この試みはうまくいきました。
他にも外部HTMLの読み込み方には方法があると思いますが、また今度試してみたいと思います。
0 コメント:
コメントを投稿