Using the Context Parameter with the OnLoad Event
The context parameter is a user-defined unique identifier that can be passed as a parameter to an OnLoad event handler that can be shared by multiple Silverlight plug-ins on the same Web page. The OnLoad context parameter corresponds to the value of the context initialization parameter.
The Silverlight.js helper file generates a slightly different OnLoad event signature from the plug-in defined form that is provided to the OBJECT or EMBED tags created by the instantiation scripts. The Silverlight.js implementation of OnLoad wraps the basic OBJECT/EMBED OnLoad. If several plug-in instances are hosted on an HTML page, there is potential for event handlers to be confused about which instance was loaded. The CreateObject and CreateObjectEx functions in Silverlight.js add an optional context parameter for initialization. Typically, this parameter is set to a unique string. That context value is passed back as an event-handler parameter, which makes it much simpler to write common onLoad handler logic that can detect which plug-in instance's onLoad event is being handled at that time. Also, sender for event handlers references the specific Silverlight plug-in instance itself rather than an indirect HTML DOM reference.
The following HTML example shows how to define two Silverlight plug-in host elements on the same Web page.
<div id="pluginHost" >
<script type="text/javascript">
// Create a variable that references the HTML element that hosts the plug-in.
var parentElement = document.getElementById("pluginHost");
// Create variables that contain unique identifiers for the plug-in.
var name = "myslPlugin_1";
var context = "context_1";
// Initialize and create the plug-in.
createSilverlight();
</script>
</div>
<div id="pluginHost2" >
<script type="text/javascript">
// Create a variable that references the HTML element that hosts the plug-in.
var parentElement = document.getElementById("pluginHost2");
// Create variables that contain unique identifiers for the instance.
var name = "myslPlugin_2";
var context = "context_2";
// Initialize and create the plug-in.
createSilverlight();
</script>
</div>
The following JavaScript example shows the corresponding user-defined CreateSilverlight method. Notice that the CreateSilverlight method uses the inline-defined values of the parentElement, name, and context variables and passes these to CreateObject.
function createSilverlight()
{
Silverlight.createObject(
"package.xap", // Source property value.
parentElement, // DOM reference to hosting DIV tag.
name, // Unique plug-in ID value, a variable set before each page call.
{ // Plug-in properties.
width:'600', // Width of rectangular region of plug-in, in pixels.
height:'200', // Height of rectangular region of plug-in, in pixels.
version:'2.0' // Plug-in version to use.
},
{
onError:null, // Use default error handler.
onLoad:onLoad // OnLoad event handler that can be used for multiple instances.
},
null, // InitParams property value set to null.
context); // Unique context ID, a variable set before each page call.
}
The following JavaScript example shows the corresponding OnLoad event-handling function that is used by both plug-in instances. The context parameter corresponds to the value defined by the plug-in's context initialization parameter.
function onLoad(plugin, userContext, sender)
{
alert(plugin.id + " : " + userContext + " : " + sender.toString());
}