Silverlight and JavaScript Communication

Question

I'm having a dandy of a time getting Silverlight and JavaScript to communicate with each other.

In the page.xaml.cs file, I marked the class as ScriptableType and two methods with ScriptableMember. I then declared:

HtmlPage.RegisterScriptableObject("Page", this);

When I attempt to invoke either method, I get obj.Content.Page is undefined:

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());

On the flip side, inside of a method in page.xaml.cs, I am calling:

HtmlPage.Window.Invoke("mapRegionChanged", GetRegion());

I have a respective method in JavaScript, which never gets called:

function mapRegionChanged(region) {
    alert("Region changed: " + region);
}

The Silverlight object is declared as follows:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
    width="151px" height="77px" id="silverlightControl">
    <param name="onload" value="regionsLoaded" />
    <param name="source" value="<%= Url.Content("~/ClientBin/Worldmap.xap") %>" />
    <param name="onerror" value="onSilverlightError" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="2.0.31005.0" />
    <param name="autoUpgrade" value="true" />
    <param name="enableHtmlAccess" value="true" />
    <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none" />
    </a>
</object>

The UserControl is defined in XAML as:

<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">
<Grid x:Name="LayoutRoot" Background="White" Width="151" Height="77" Cursor="Hand" MouseMove="OnMouseMove" MouseLeftButtonUp="OnMouseUp" MouseLeave="OnMouseLeave">

Answer 1

If you found some incompatibility between FireFox and IE, we'll need to report it. Might be something else in the JS on the page, or it might be a setting in FF3 (like flashblock-type stuff)

Answer 2

I experienced this problem. Firefox is my default browser and is therefore the browser that Visual Studio (actually VWD, but no matter) starts up. While developing, I added the JavaScript calling code to the client page and found that the "content" child member of the Silverlight component could not be found in the DOM in FireFox -- but it could be found in IE. I restarted the Visual Studio web servers (the ones in the system tray) and hey, presto -- it worked in Firefox! The problem seems to have been caused by the caching of the Silverlight component in those web servers.

Answer 3

Hello Steve,

Some days ago I have read the php architect magazine and there's an article about Silverlight that explains how to communicate with javascript, you might want to check it out.

Go to http://www.phparch.com and register so you can download the magazine, then you must download the May 2009 issue, all other issues must be paid but this one in my account was free, I hope in yours too, if you can't download it just let me know and I can send you the PDF by email.

And here is the direct link to download it: https://store-phpa.phparch.com/c/phpa/magazine/pickup/97

Best regards, Alexandru

Answer 4

Make sure to enable HTML acces:

in C#:

        System.Windows.Interop.SilverlightHost host = Application.Current.Host;
        System.Windows.Interop.Settings settings = host.Settings;

        bool enableAcces = settings.EnableHTMLAccess;
        enableAcces = true;

in HTML:

<param name="enablehtmlaccess" value="true" />

This worked for me.