title: Silverlight and JavaScript Communication
body: <p>I'm having a dandy of a time getting Silverlight and JavaScript to communicate with each other. </p>
  
  <p>In the page.xaml.cs file, I marked the class as <em>ScriptableType</em> and two methods with <em>ScriptableMember</em>. I then declared: </p>
  
  <pre><code>HtmlPage.RegisterScriptableObject("Page", this);
  </code></pre>
  
  <p>When I attempt to invoke either method, I get obj.Content.Page is undefined:</p>
  
  <pre><code>var obj = document.getElementById('silverlightControl');
  alert(obj);               // [object HtmlObjectElement]
  alert(obj.Content);       // Content
  alert(obj.Content.Page);  // obj.Content.Page is undefined
  alert(obj.Content.Page.GetRegion());
  </code></pre>
  
  <p>On the flip side, inside of a method in page.xaml.cs, I am calling:</p>
  
  <pre><code>HtmlPage.Window.Invoke("mapRegionChanged", GetRegion());
  </code></pre>
  
  <p>I have a respective method in JavaScript, which never gets called:</p>
  
  <pre><code>function mapRegionChanged(region) {
      alert("Region changed: " + region);
  }
  </code></pre>
  
  <p>The Silverlight object is declared as follows:</p>
  
  <pre><code>&lt;object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
      width="151px" height="77px" id="silverlightControl"&gt;
      &lt;param name="onload" value="regionsLoaded" /&gt;
      &lt;param name="source" value="&lt;%= Url.Content("~/ClientBin/Worldmap.xap") %&gt;" /&gt;
      &lt;param name="onerror" value="onSilverlightError" /&gt;
      &lt;param name="background" value="white" /&gt;
      &lt;param name="minRuntimeVersion" value="2.0.31005.0" /&gt;
      &lt;param name="autoUpgrade" value="true" /&gt;
      &lt;param name="enableHtmlAccess" value="true" /&gt;
      &lt;a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"&gt;
          &lt;img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none" /&gt;
      &lt;/a&gt;
  &lt;/object&gt;
  </code></pre>
  
  <p>The UserControl is defined in XAML as:</p>
  
  <pre><code>&lt;UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Worldmap.Page"
  Width="151" Height="77" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"&gt;
  &lt;Grid x:Name="LayoutRoot" Background="White" Width="151" Height="77" Cursor="Hand" MouseMove="OnMouseMove" MouseLeftButtonUp="OnMouseUp" MouseLeave="OnMouseLeave"&gt;
  </code></pre>