使用 JavaScript 為你的網頁增加 Sliverlight 支持

本文教你如何使用 JavaScript 在網頁中嵌入 Sliverlight 組件。

我們需要在 Web 應用中使用到 Silverlight.js 這個 JS 文件。

<script type="text/javascript" src="Silverlight.js"></script>

嵌入該插件：

<div id="silverlightControlHost">
    <script type="text/javascript">

        Silverlight.createObject(
            "ClientBin/SilverlightApplication1.xap",  // source
            silverlightControlHost,  // parent element
            "slPlugin",  // id for generated object element
            {
                width: "100%", height: "100%", background: "white", 
                version:"4.0.60310.0"
            },
            // See the event handlers in the full example.
            { onError: onSLError, onLoad: onSLLoad },
            "param1=value1,param2=value2", 
            "context"    // context helper for onLoad handler.
        );
    </script>

</div>

參數描述:

1. 第一個參數值指定了 Sliverligh 插件的源
2. 第二個參數指定要在那個HTML元素中嵌入這個 Sliverlight 插件
3. 第三個參數是所產生的對象元素的HTML DOM ID
4. 第四個參數為一個數組的屬性，如版本、寬度和高度
5. 第五個參數為事件處理器，例如 Onload 和 OnError 事件
6. 第六個參數是一個字符串，包含一些用逗號隔開的參數名和值
7. 最后一個參數是指定生成唯一的 Sliverlight 插件實例

如果用戶電腦上為安裝 Sliverlight ，那么我們需要顯示提示信息：

<div id="silverlightControlHost">
    <script type="text/javascript">
        var getSilverlightMethodCall = 
            "javascript:Silverlight.getSilverlight(\"4.0.60310.0\");"
        var installImageUrl =
            "http://go.microsoft.com/fwlink/?LinkId=161376";
        var imageAltText = "Get Microsoft Silverlight";
        var altHtml = 
            "<a href='{1}' style='text-decoration: none;'>" +
            "<img src='{2}' alt='{3}' " +
            "style='border-style: none'/></a>";
        altHtml = altHtml.replace('{1}', getSilverlightMethodCall);
        altHtml = altHtml.replace('{2}', installImageUrl);
        altHtml = altHtml.replace('{3}', imageAltText);

        Silverlight.createObject(
            "ClientBin/SilverlightApplication1.xap", 
            silverlightControlHost, "slPlugin",
            {
                width: "100%", height: "100%",
                background: "white", alt: altHtml,
                version: "4.0.60310.0"

            },
            // See the event handlers in the full example.
            { onError: onSLError, onLoad: onSLLoad },
            "param1=value1,param2=value2", "row3");
    </script>
</div>

你還可以使用 Sliverlight.js 提供的更多的 api。

via codeproject