Home > Developer > JavaScript
I wrote about flex and JavaScript interoperability some time ago. This article describes the interoperability between Silverlight and HTML/JavaScript. Of course, Silverlight can use multiple hosting languages. I will use C # here #.
Abstract:
First introduceSystem. Windows. BrowserIn the namespace, I will introduce how Silverlight operates HTML elements, how to call Silverlight from JavaScript, and how Silverlight calls Javascript methods.
1. system. Windows. Browser
Silverlight provides a set of objects to describe the HTML Document Object Model (DOM), including htmlpage, htmldocument, hemlelement, htmlelementcollection, and so on. we can use these objects to access the HTML page content from Silverlight, such as getting an HTML element and navigating to a new URL. (PS: Silverlight 1.1 complete API List)
First, let's look at the htmlpage class, which provides the browser information's static property browserinformation; provides the static method navigate to easily jump to other web pages. provides the document attribute to access the HTML Dom, so you can do a lot with it.
The htmldocument/hemlelement class is used to access Dom. with Dom, you can do anything like JavaScript.
Note: If you need Silverlight to access the HTML page content, you must set enablehtmlaccess to true when creating the Silverlight control.
2. Silverlight manipulating html
Imagine how javascript accesses HTML elements. Silverlight can also.
Modify page attributes: for example, modify the page title, htmlpage. Document. setproperty ("title", "New title ");
Manipulate HTML elements:
Htmlelement ELEM = htmlpage. Document. getelementbyid ("BTN ");
ELEM. setattribute ("value", "Haha ");
ELEM. getattribute ("value ");
ELEM. attachevent ("onclick", delegate (Object sender, htmleventargs he ){
//...
});
3. Javascript calls the Silverlight Method
To call Silverlight using JavaScript, Silverlight must provide JavaScript with an operable object through Dom.
Create a Silverlight project and modify page. XAML. CS as follows:
Using system;
Using system. windows;
Using system. Windows. browser;
Using system. Windows. controls;
Namespace silverlightproject1
{
[Scriptable]
Public partial class page: canvas
{
Public void page_loaded (Object o, eventargs E)
{
// Required to initialize Variables
Initializecomponent ();
Webapplication. Current. registerscriptableobject ("JS", this );
}
[Scriptable]
Public String calledbyjs (string name)
{
Return "I'm Silverlight, called by" + name;
}
}
}
Modify testpage.html as follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Silverlight project test page </title>
<SCRIPT type = "text/JavaScript" src = "Silverlight. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "testpage.html. js"> </SCRIPT>
<Style type = "text/CSS">
. Silverlighthost {width: 640px; Height: 480px ;}
</Style>
<SCRIPT type = "text/JavaScript">
Function callsl ()
{
Var control = Document. getelementbyid ("silverlightcontrol ");
VaR manager = control. content. js;
Alert (Manager. calledbyjs ('js '));
}
</SCRIPT>
</Head>
<Body>
<Div id = "silverlightcontrolhost" class = "silverlighthost">
<SCRIPT type = "text/JavaScript">
Createsilverlight ();
</SCRIPT>
</Div>
<Input id = "BTN" type = "button" value = "Call Silverlight method" onclick = "callsl ()"/>
</Body>
</Html>
It seems that the Silverlight method is not yet supported to return a complex type, but fortunately, Silverlight has built-in JSON support. It is OK to serialize criptserializer in the system. Windows. browser. serialization namespace.
4. Silverlight calls the JavaScript Method
Silverlight cannot directly call Javascript methods, but events can be used to throw events in Silverlight and respond to the events in JavaScript.
Modify page. XAML as follows:
<Canvas X: Name = "parentcanvas"
Xmlns = "http://schemas.microsoft.com/client/2007"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
Loaded = "page_loaded"
X: class = "silverlightproject1.page; Assembly = clientbin/silverlightproject1.dll"
Width = "640"
Height = "480"
Background = "white"
>
<Textblock text = "Call js method" mouseleftbuttondown = "onclick"/>
</Canvas>
Modify page. XAML. CS as follows:
Using system;
Using system. windows;
Using system. Windows. browser;
Using system. Windows. controls;
Using system. Windows. input;
Namespace silverlightproject1
{
[Scriptable]
Public partial class page: canvas
{
Public void page_loaded (Object o, eventargs E)
{
// Required to initialize Variables
Initializecomponent ();
Webapplication. Current. registerscriptableobject ("JS", this );
}
Protected void onclick (Object sender, mouseeventargs E)
{
If (this. calljs! = NULL)
{
Eventhandler temp = This. calljs;
Temp (this, eventargs. Empty );
}
}
[Scriptable]
Public event eventhandler calljs;
}
}
Modify testpage.html. JS: added a response to the calljs event thrown by Silverlight In the onload event.
// JScript source code
// Contains callto Silverlight. JS, example below loads page. XAML
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: onloaded}
});
// Give the keyboard focus to the Silverlight control by default
Document. Body. onload = function (){
VaR silverlightcontrol = Document. getelementbyid ('silverlightcontrol ');
If (silverlightcontrol)
{
Silverlightcontrol. Focus ();
}
}
}
Function onloaded (sender, argS)
{
Sender. content. js. calljs = calledbysl;
}
Function calledbysl (sender, argS)
{
Alert ("I'm JS, called by Silverlight ");
}
Done!
I tried to add a custom parameter to the Silverlight event. The javascript side does not seem to receive the parameter ?? I don't know why.
Summary:
The method of Silverlight and JavaScript interoperability is similar to that of Flex. However, I still like Silverlight, And the C # syntax is simple and clear.
References:
[Silverlight exploration] exploring the interaction between Silverlight and JavaScript
Access HTML elements by Silverlight
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
