Silverlight.jsを使う
サンプル01のように直接、object要素を用いてHTMLにSilverlightを組み込むことができますが、JavaScriptを利用できる環境であればSilverlight 1.0 SDKに付属しているSilverlgiht.jsファイルを利用することで、関数を呼び出すだけでスクリプトが自動的に初期化を行ってくれます(参照サイト)。
一般公開を行わない、ローカル上でのテストに利用する程度であればSilverlightの公式ページにあるQuickStartsで使われているファイルを借用するような形でもいいでしょう。たとえば、次のWebサイトから直接取得することができます。
このSilverlight.jsファイル内で定義されているcreateObject()関数を利用することで、HTMLファイル内の指定した要素の内部に自動的にobject要素を生成して挿入してくれます。加えて、クライアント環境にSilverlightがインストールされていない場合、Silverlightのダウンロードページに誘導するリンクを表示してくれます。
Silverlight.createObject = function(
source, parentElement, id, properties, events, initParams, userContext)
Silverlight.createObject() 関数
Silverlight.jsでは、関数がSilverlightオブジェクト内に含まれています。そのためSilverlightという識別子が名前空間のような役割を持ちます。これは、グローバルな領域で多くの識別子を公開しないための処置です。
この関数のsourceパラメータには、Silverlightに表示するXAMLファイルのアドレスを指定します。parentElementはSilverlight を格納する親要素を表すDOMオブジェクトを指定します。通常はdiv要素を表すオブジェクトを指定します。idには、表示するSilverlightオブジェクトの識別子を指定します。
propertiesには、object要素のパラメータとして利用されるプロパティを格納したオブジェクトを指定します。このオブジェクトのプロパティ名が、object要素のパラメータの名前に直接対応します。たとえば、幅はwidthプロパティ、高さはheightプロパティ、背景色はbackgroundプロパティに格納されます。
eventsには、エラーが発生したり、読み込みが終了した時点で呼び出してほしいイベントハンドラを保存するオブジェクトを指定します。エラー発生時に呼び出される関数はonError、読み込まれたときに呼び出される関数はonLoadが使われます。initParamsとuserContextはonLoadイベント発生時に利用する値を指定します。
Silverlight.js の詳細は、次のページが参考になります。
Silverlightを表示するHTMLファイルのhead要素内でSilverlight.jsを読み込ませ、Silverlightを埋め込む場所でcreateObject()関数を呼び出すことで表示できます。
サンプル02 index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Silverlight test</title>
<script type="text/javascript" src="Silverlight.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var parentElement =
document.getElementById("container");
Silverlight.createObject(
"test.xaml", parentElement, "silverlight01",
{
width: "400",
height: "300",
inplaceInstallPrompt: "false",
background: "#FFAAAA",
isWindowless: "false",
framerate: "24",
version: "1.0"
},
{
onError: null,
onLoad: null
},
null, null
);
</script>
</body>
</html>
サンプルを表示する
 |
サンプル02の実行結果 |
サンプル02のtest.htmlはSilverlight.jsファイルのcreateObject()関数を使ってSilverlightを表示しています。object要素を直接描画するよりも、サポートされているシステムかどうか、プラグインがインストールされているかどうかを調べ、適切な結果を表示してくれるcreateObject()関数を使うことをお勧めします。
