Tuesday, September 18, 2007 5:48 PM
Tamir Khason
How to invoke client side JavaScript from Silverlight object
Yesterday, I got a question from one of my clients' about how invoke javascript on client side HTML page from inside Silverlight object. It's easy to access hosting HTML document DOM model from Silverlight, as well as you can access text of Javascript there, but you can not invoke it. The only way is to interpret it and then do something with it. No way - I told, and begun to investigate the field.
The first thing, I found is an ability to expose Silverlight objects to HTML hosting document, by using Scriptable attribute. So, Let's mark our SL canvas and enable access to it
[Scriptable]
public partial class Page : Canvas
Next, handy WebApplication class enables me to register Silverlight handlers and access them from HTML page
public Page()
: base()
{
WebApplication.Current.RegisterScriptableObject("Handler", this);
}
Now, I can create handler inside Silverlight application and call it there (don't forget to mark it scriptable)
[Scriptable]
public event EventHandler<CallbackEventArgs> Callback;
void click(object s, MouseEventArgs e)
{
if (Callback != null)
{
CallbackEventArgs args = new CallbackEventArgs("Silverlight");
Callback(this, args);
}
}
Now arguments. Let's do something simple and generic
[Scriptable]
public class CallbackEventArgs : EventArgs
{
object _bag;
[Scriptable]
public object DataBag { get { return _bag; } set { _bag = value; } }
public CallbackEventArgs(object bag)
{
DataBag = bag;
}
public override string ToString()
{
return DataBag.ToString();
}
}
We are finished at silverlight side. Now HTML turn. Go into your TestPage.html.js and subscribe to OnLoad event (you can not do it in constructor, due to fact, that SL object does not exist in this point)
function createSilverlight()
{
Silverlight.createObjectEx({
source: "Page.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "1.1",
enableHtmlAccess: "true"
},
events: {
onLoad: OnLoad
}
});
function OnLoad(sender, args)
{
sender.Content.Handler.Callback = function(sender, arg) { foo(arg); }
}
Pay attention of the way, I'm accessing scriptable objects, exposed by Silverlight.
Well, we, actually, finished. Our foo(string) method will be called.
<script type="text/javascript">
function foo(val)
{
alert("Hello world from "+val+"!");
}
</script>
</head>
<body>
<div id="SilverlightControlHost" class="silverlightHost" >
<script type="text/javascript">
createSilverlight();
</script>
</div>
<button onclick="foo('JS');" >Click me (HTML)</button>
</body>
Hello JS world from inside Silverlight.
Source code for this article.
תגים:tutorial, Tips and Tricks, source, Silverlight