Accessing Silverlight Content with JavaScript

We will create a number of .js files, or code-behind JavaScript files for the HTML document containing the Silverlight content, so to speak. The JavaScript code will access the Silverlight content, add new Silverlight elements, and read information about the plug-in or the content of the XAML file.

We will use the Script Web Visual Studio template as the basis for the examples in this part of the book. Of course you can achieve everything we are covering in the chapters in this part of the book using the project template, however it is a bit easier to inject JavaScript code in the Script Web template, since the sample page there is already using JavaScript code.

Accessing the Plug-in

To access Silverlight content embedded on a page, you first need to access the Silverlight plug-in. There are two ways to retrieve this information: access the plug-in from within the XAML event handler code or use the JavaScript Document Object Model (DOM). Let's start with the latter option and look at the automatically generated (thanks to the template) JavaScript code to load Silverlight content:

Code View:

Silverlight.createObjectEx({
  source: 'Scene.xaml',
  parentElement: document.getElementById('silverlightPlugInHost'),
  id: 'silverlightPlugIn',
  properties: {
    width: '100%',
    height: '100%',
    background:'white',
    version: '1.0'
  },
  events: {
    onLoad: Silverlight.createDelegate(scene, scene.handleLoad),
    onError: function(sender, args) {
    var errorDiv = document.getElementById("errorLocation");
    if (errorDiv != null) {
      var errorText = args.errorType + "- " + args.errorMessage;
          
      if (args.ErrorType == "ParserError") {
        errorText += "
File: " + args.xamlFile;
        errorText += ", line " + args.lineNumber;
        errorText += " character " + args.charPosition;
      }
      else if (args.ErrorType == "RuntimeError") {
        errorText += "
line " + args.lineNumber;
        errorText += " character " +  args.charPosition;
      }
      errorDiv.innerHTML = errorText;
    }  
  }
  },    
  context: null 
});

					  

Note the id property. This provides the DOM ID JavaScript can use to access the plug-in:

var plugin = document.getElementById('silverlightPlugIn');

If you are using the ASP.NET ScriptManager, you can, of course, save some typing and use $get() instead of document.getElementById().

It is tempting to use the ID of the element holding the Silverlight content (in all of this book's examples: SilverlightPlugInHost), but this will not access the plug-in itself.

Then, starting with the plugin variable, you can access quite a bit of data on the plug-in and its contents, but we will come back to that in a minute. First we will have a look at the other option to access the plug-in, from within the XAML event handling code.

Every object in the XAML has a (JavaScript) method called getHost() that also returns a reference to the plug-in. Assuming that the eventHandler() function handles any event for the XAML file, this code would appropriately fill the plugin variable:

function eventHandler(sender, eventArgs) {
  var plugin = sender.getHost();
}

Once you have accessed the plug-in, you can go further. The Silverlight plug-in exposes three types of information to JavaScript:

General plug-in information

These are accessible as direct properties or methods of the plug-in object. Examples are source (the XAML source code), initParams (the set of options used when initializing the Silverlight plug-in in the createSilverlight() function), and onError (the event handler that handles errors).

Plug-in settings information

These are accessible using plugin.settings.. Examples are background (the background color of the current Silverlight content) and maxFrameRate (the maximum frame rate in frames per second).

Plug-in content information

These are accessible using plugin.content.. Examples are findName() (a method to find XAML elements by their names, just like the server-side FindName() method), fullScreen (whether to display the content in full-screen mode), and root (the root canvas element of the Silverlight content).