Add Silverlight to a Web Page Using JavaScript

This tip shows how we can embed a Silverlight component using JavaScript.

We need to link the Silverlight.js file into the Web application.

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

To embed the plug-in

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

Parameter description:

1. The first parameter value specifies the Silverlight plug-in source value.
2. The second parameter specifies the HTML element that will host the Silverlight plug-in.
3. The third parameter specifies the HTML DOM ID of the generated object element.
4. The fourth parameter specifies an array of property values like version, height, and width.
5. The fifth parameter specifies an array of event handlers, i.e., Onload and OnError events.
6. The sixth parameter specifies a string that contains name and value pairs separated by commas.
7. The seventh and last parameter specifies a value that you can use to uniquely identify the generated plug-in instance in an OnLoad event handler.

To specify alternate HTML to display when Silverlight is not installed

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

You can do more things using the JavaScript API of the Silverlight.js file.

More APIs for Silverlight.