使用 JavaScript 将 Silverlight 添加到网页

本技巧展示了如何使用 JavaScript 嵌入 Silverlight 组件。

我们需要将 Silverlight.js 文件链接到 Web 应用程序。

<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. 第一个参数值指定 Silverlight 插件的源值。
2. 第二个参数指定将托管 Silverlight 插件的 HTML 元素。
3. 第三个参数指定生成的 object 元素的 HTML DOM ID。
4. 第四个参数指定属性值数组，例如版本、高度和宽度。
5. 第五个参数指定事件处理程序数组，即 Onload 和 OnError 事件。
6. 第六个参数指定一个包含由逗号分隔的名称和值对的字符串。
7. 第七个也是最后一个参数指定一个值，您可以在 OnLoad 事件处理程序中唯一地标识生成的插件实例。

指定在未安装 Silverlight 时显示的替代 HTML

<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>

您可以使用 Silverlight.js 文件的 JavaScript API 执行更多操作。

更多 Silverlight API.