Click here to Skip to main content
Click here to Skip to main content

Tagged as

Add Silverlight to a Web Page Using JavaScript

, 30 Dec 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
How to add Silverlight to a web page using JavaScript using the silverlight.js file.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Nigam Patel
Software Developer
India India
I am working as software engineer since last 3.5 year.
i am working in .net technologies.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141216.1 | Last Updated 30 Dec 2011
Article Copyright 2011 by Nigam Patel
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid