"Silverlightの領域をdocument.bodyからdiv内に閉じ込める"の最後のサンプルがFirefoxで動かないのを修正する
Silverlightの領域をdocument.bodyからdiv内に閉じ込める では最終的に作成したサンプルは これ です。これ、IE7では動きますが、Firefoxでは動きません。最初、原因がわからなかったのですが、何とかわかりました。まず、先の例では、index.html中に次のような指定を追加しました。
<div id=" silverlightBlock "></div>
そして、createSilverlight.jsのcreateMySilverlightPlugin()関数定義で、作成場所として silverlightBlock を指定しました。次のように、です。
function createMySilverlightPlugin() {
Silverlight.createObject("myxaml.xaml",
silverlightBlock
,"firstsample",{width:"300",height:"300",background:"lavender",version:"1.0"},{onError:null,onLoad:null});
}
これで、id名がsilverlightBlockであるdivブロックがSilverlight領域の作成場所になると書きましたが、これが通用するのはIE7だけだったみたいです。FirefoxはIE7のように融通が利かないみたいで、id名だけでは場所を認識してくれません。具体的には、次のようにJavaScriptのgetElementById()メソッドを使って、id名のオブジェクトへの参照をキチンと変数に格納し、その変数をcreateMySilverlightPlugin()の関数定義中で指定する必要があります。
var 変数 = document.getElementById("silverlightBlock");
というわけで、 Firefoxで動かなかったサンプル は、全体を少し修正する必要があります。修正後の4つのファイルは次のとおりです。
【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" xml:lang="ja">
<head>
<title>はじめてのSilverlight</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
</head>
<body>
<h2>JavaScriptでSilverlight</h2>
<div id="silverlightBlock"></div>
<script type="text/javascript">
var parentElement = document.getElementById("silverlightBlock");
createMySilverlightPlugin();
</script>
</body>
</html>
【createSilverlight.js】
function createMySilverlightPlugin() {
Silverlight.createObject("myxaml.xaml",
parenetElement
,"firstsample",{width:"300",height:"300",background:"lavender",version:"1.0"},{onError:null,onLoad:null});
}
【Silverlight.js】（そのまま使うので内容省略）
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="100" Width="100"
Canvas.Left="100" Canvas.Top="100"
Stroke="crimson" StrokeThickness="10" Fill="navy" />
</Canvas>
上の4つのファイルを同じフォルダに置き、index.htmlを読み込んだ結果が↓です。今度は、IE7でもFirefoxでも動くはずです。
http://www.makoto3.net/xaml/silverlight0025/index.html
Firefoxで動かなかったサンプル では、<body>のonloadでcreateMySilverlightPlugin()関数を呼び出していましたが、こちらの方法ではそれをやめて<body>～</body>内にスクリプトを入れています。
HTMLファイルは上から下にレンダリングされていきますから、id名がsilverlightBlockの<div>が読み込まれたあと、次のスクリプトを実行し、このdivオブジェクトへの参照を変数parentElementに格納しています。
var parentElement = document.getElementById("silverlightBlock");
そして、そのあとでcreateMySilverlightPlugin()関数を実行しています。
createSilverlight.jsに書いてあるcreateMySilverlightPlugin()関数の定義では、Silverlightの作成場所として変数のparentElementを指定しているので、<div id="silverlightBlock">～</div>内にSilverlightプラグインが作成されることになります。
というわけで、何とか、IE7でもFirefoxでも動くSilverlightの書き方にたどり着けました。
このページは
xfy Blog Editor
を利用して作成されました。
コメント