Adding Silverlight to a Web Page by Using HTML or JavaScript
Microsoft Silverlight will reach end of support after October 2021. Learn more.
You embed the Silverlight plug-in in a Web page by modifying its HTML source. In the source, you can either add an HTML object element or a call a JavaScript embedding function in the Silverlight.js helper file.
The documentation in this section describes common tasks related to the Web page that hosts the Silverlight plug-in. When you embed the plug-in in a Web page, you should also provide a custom installation and upgrade experience. For more information, see Microsoft Silverlight Installation Experience White Paper and Sample Code.
This topic contains the following sections:
Using the HTML Object Element
Using the JavaScript Embedding Functions
Custom Initialization Parameters
Silverlight Versioning
Resizing a Silverlight Plug-In
Using the HTML Object Element
You typically embed the Silverlight plug-in by adding an object element directly to your HTML. The object element is recommended for the following reasons:
It is supported by all the browsers that Silverlight supports, so JavaScript browser detection is not required.
It minimizes the potential for clashes with JavaScript.
It works even when the server prohibits JavaScript.
It is self-contained, enabling you to load your application after a single download from the server.
The object element also lets you provide child content that is displayed when a user does not have Silverlight installed. This provides a lightweight way to customize the plug-in installation experience.
For more information, see How to: Add Silverlight to a Web Page by Using HTML.
Using the JavaScript Embedding Functions
The embedding functions in the Silverlight.js file ultimately generate HTML object elements and expose the same features as the object element. You can use other Silverlight.js functions even if you do not use the embedding functions, which are provided as a convenience to JavaScript developers.
For example, you can use the embedding functions to configure the plug-in dynamically or to factor the configuration into a separate JavaScript file. The embedding functions also help distinguish multiple Silverlight plug-in instances in a page.
For more information, see How to: Add Silverlight to a Web Page by Using JavaScript.
Custom Initialization Parameters
Sometimes it is useful to implement your Silverlight application so that its initial state can be specified in the plug-in configuration. You can specify custom initialization parameters using the HTML object element or the JavaScript embedding functions. The plug-in passes your parameter values into your managed Silverlight code, where you can retrieve them in an Application.Startup event handler. You can also retrieve these values through the SilverlightHost.InitParams property.
For more information, see How to: Specify and Retrieve Custom Initialization Parameters.
Silverlight Versioning
In most cases, you will specify the latest version of Silverlight as described in the embedding topics. However, in some cases you might want to require a specific version or perform fine-grained version detection in your Web page.
For information about how to indicate a specific Silverlight version, see Silverlight Plug-in Versioning.
Resizing a Silverlight Plug-In
When you set the height and width of the plug-in, you can specify absolute or relative values. Relative values are percentages of the browser height or width, which means that the plug-in will resize when the browser window resizes. It is also possible to programmatically resize the plug-in through the HTML DOM.
You can respond to plug-in size changes in both the managed API and the JavaScript API. For example, you might want to scale your user interface (UI) to match the new size, or change your UI layout. You can also respond to changes in the browser zoom setting.
For more information, see Silverlight Plug-in Sizing.
See Also