How to host a Silverlight Application using JavaScript? : Silverlight Feeds

How to host a Silverlight Application using JavaScript?

by Kunal Chowdhury via Kunal's Blog on 1/19/2012 10:00:00 PM

We all know the process to embed a Silverlight application inside a Webpage using div and object tag. When we create a new Silverlight application project, those tags automatically generates by the IDE inside the html and aspx pages.

In many cases we need to dynamically add the Silverlight application inside a webpage. In this post, we will learn the process to host it using JavaScript. Looks interesting? Read to know more.

About the API

Every Silverlight web project consists of a JavaScript helper file called "Silverlight.js", that you can reference in your HTML or ASPX pages. You can call the createObject and createObjectEx functions defined in this file to host your Silverlight plug-in inside a Web page.

Those functions accept configuration details as input parameters and generate equivalent HTML object elements. Let's start describing more about this with a simple example to help you to understand it better.

Embedding Silverlight Application using <object /> Tag

By default when you create a Silverlight project, it creates a Web hosting project for you too. In that project you will find one html file and one aspx file where we have the following code to host the Silverlight application:

    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2,"
                type="application/x-silverlight-2"
                width="100%" height="100%">
            <param name="source" value="ClientBin/SilverlightApplication1.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="4.0.60310.0" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.60310.0" 
                style="text-decoration: none">
                <img src="http://go.microsoft.com/fwlink/?LinkId=161376"
                        alt="Get Microsoft Silverlight"
                        style="border-style: none" />
            </a>
        </object>
        <iframe id="Iframe1" 
                style="visibility: hidden; height: 0px; width: 0px; border: 0px">
        </iframe>
    </div>

The <object /> tag creates the object of the Silverlight plugin and embeds your application inside it. You can add proper param tags inside it to set recommended parameters for your application.

Embedding Silverlight Application using JavaScript

Here in this point we will learn the way to create this Silverlight plugin dynamically using JavaScript and host your application inside it. Here is the complete code that you can use to host the XAP inside the page dynamically:

    <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"
                },

                { onError: onSilverlightError },
                "context"    // context helper for onLoad handler.
            );
        </script>
    </div>

The createObject() method takes XAP file path as source, the second parameter takes the parent control name which is hosting the Silverlight plug-in, the third parameter takes the generated object element ID, the fourth parameter specifies an array of property values, the fifth parameter specifies an array of event handlers, the sixth parameter specifies a string that contains name and value pairs as params separated by commas and the last parameter specifies a value that you can use to uniquely identify the generated plug-in instance in an OnLoad event handler.

Now when you launch the application in browser window, the page script will generate the object dynamically and embed it to itself, which will load the mentioned XAP in the web page.

End Note

I hope, this post will help you to understand the Silverlight application hosting process inside a webpage dynamically using JavaScript call. Do you have any queries on this? Let me know. I will try to help you as soon as possible.

Last but not least, connect with me on Twitter and Facebook for technical updates and articles news. Also subscribe to my blog’s Newsletter to get all the updates delivered directly to your inbox. We won’t spam or share your email address as we respect your privacy.