Quick Silverlight Tip: How to access HTML DOM from Silverlight and Silverlight managed objects from HTML?

After my session yesterday, I got number of email from people, who have a problem to access HTML DOM from Silverlight and vice verse. I want to answer to all of you by this post.

Access HTML from Silverlight

You have not do anything special in Silverlight to access it. Your friend is HtmlPage.Window object. For example, if I want to execute window.open JavaScript method from Silverlight, all I have to do is to call:

public void OpenWindow()

{

HtmlPage.Window.Invoke("open", new object[] { "http://blogs.microsoft.co.il/blogs/tamir", "login", "resizable=1,width=646,height=436" });

}

HtmlPage.Window.Invoke also returns Object – this is the response of function executed.

Access Silverlight Managed Objects from HTML

Here you should remember two things:

You should mark both class and member you want to access with special attributes ScriptableType (for class) and ScriptableMember (for member)
Register Scriptable object anywhere (for example in Constructor).

So, if you want OpenWindow method to be exposed from the Page class to HTML, you should use following code:

    [ScriptableType]
public partial class Page : UserControl    {
public Page() {
            InitializeComponent();
            HtmlPage.RegisterScriptableObject("Page", this);
        }

[ScriptableMember]
public void OpenWindow() {
object o = HtmlPage.Window.Invoke("open", new object[] { "http://blogs.microsoft.co.il/blogs/tamir", "login", "resizable=1,width=646,height=436" });
        }
}

That’s all, folks. Be good people and have a nice day.

Here the script of test application:

Page.xaml

<UserControl x:Class="DomAccessDemo.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Height="20">

<Grid x:Name="LayoutRoot" Background="White">

<Button Click="Button_Click" Content="Fun!"/>

</Grid>

</UserControl>

Page.xaml.cs

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Browser;

using System.ComponentModel;

namespace DomAccessDemo

{

    [ScriptableType]

public partial class Page : UserControl

    {

public Page()

        {

            InitializeComponent();

HtmlPage.RegisterScriptableObject("Page", this);

        }

private void Button_Click(object sender, RoutedEventArgs e)

        {

            OpenWindow();

        }

        [ScriptableMember]

public void OpenWindow()

        {

object o = HtmlPage.Window.Invoke("open", new object[] { "http://blogs.microsoft.co.il/blogs/tamir", "login", "resizable=1,width=646,height=436" });

        }

    }

}

DomAccessDemoTestPage.aspx

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">

<head runat="server">

<title>Test Page For DomAccessDemo</title>

<script language="javascript">

function testSL()

        {

var xaml = document.getElementById("Xaml1");

            xaml.Content.Page.OpenWindow();

        }

</script>

</head>

<body style="height:100%;margin:0;">

<form id="form1" runat="server" style="height:100%;">

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<div style="height:100%;">

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/DomAccessDemo.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />

</div>

</form>

<button onmouseup="testSL();">Test</button>

</body>

</html>

5 Responses to “Quick Silverlight Tip: How to access HTML DOM from Silverlight and Silverlight managed objects from HTML?”

Silverlight news for July 2, 2008 Says:
January 1st, 2009 at 12:53 am
Pingback from Silverlight news for July 2, 2008
Community Blogs Says:
January 1st, 2009 at 12:53 am
16 posts today… yikes: Corrina Barber on Sparkling Client, Training CD update via Tim Heuer, Progressive
timheuer Says:
January 1st, 2009 at 12:53 am
a video demonstration of these techniques is also available at silverlight.net/…/learnvideo.aspx
Katelin Kostecki Says:
March 6th, 2010 at 6:10 am
Fantastic post , its a wow mistress post , thank you and keep on!
Mabel Lawernce Says:
March 17th, 2010 at 7:23 am
Yeah , I d love to be in those domme games! I love your post thoug

Tamir Khason – Just code