1.在Silverlight中调用JavaScript
1.1. 设置调用页面
在head中添加js脚本
<!--方法1中用到-->
<script type="text/javascript">
function Hello(message) {
alert('Hello:' + message);
}
</script>
<!--方法2中用到-->
<script type="text/javascript">
myHello = function(message) {
this.Message = message;
}
myHello.prototype.Display = function() {
alert('Hello:' + this.Message);
}
</script>
在Form中添加dom元素
<div id="result">
<a style=" color:Blue">链接</a>
</div>
1.2. 设置Silverlight页面
前台代码：
<StackPanel Orientation="Horizontal">
<TextBox x:Name="input" Width="340" Height="40" Margin="20 0 20 0"></TextBox>
<Button x:Name="submit1" Width="120" Height="40" Background="Red"
Content="方法1" FontSize="20" Foreground="Red" Click="submit1_Click"></Button>
<Button x:Name="submit2" Width="120" Height="40" Background="Red"
Content="方法2" FontSize="20" Foreground="Red" Click="submit2_Click"></Button>
<Button x:Name="submit3" Width="120" Height="40" Background="Red"
Content="方法3" FontSize="20" Foreground="Red" Click="submit3_Click"></Button>
<Button x:Name="submit4" Width="120" Height="40" Background="Red"
Content="方法3的应用" FontSize="20" Foreground="Red" Click="submit4_Click"></Button>
</StackPanel>
后台代码：
private void submit1_Click(object sender, RoutedEventArgs e)
{
//方法1:使用InvokeSelf调用脚本对象的自身
ScriptObject hello = HtmlPage.Window.GetProperty("Hello") as ScriptObject;
hello.InvokeSelf(this.input.Text);
}
private void submit2_Click(object sender, RoutedEventArgs e)
{
//方法2:使用Invoke传入名称进行调用
ScriptObject script = HtmlPage.Window.CreateInstance("myHello", this.input.Text);
object result = script.Invoke("Display");
}
private void submit3_Click(object sender, RoutedEventArgs e)
{
//方法3:给该方法传入一段字符串，它都会作为JavaScript来执行 如：HtmlPage.Window.Eval("alert('ddddd')")
HtmlPage.Window.Eval(this.input.Text);
}
private void submit4_Click(object sender, RoutedEventArgs e)
{
//方法3的应用：使用HtmlPage.Window.Eval 来取html元素
HtmlElement result = HtmlPage.Window.Eval("document.getElementById('result')") as HtmlElement;
string message = result.GetAttribute("innerHTML");
HtmlPage.Window.Alert(message);
}
2.在JavaScript中调用Silverlight中的.net代码
2.1. 新建SilverLight页面,
注意：需要 在Silverlight中公开相关方法供JavaScript调用
前台代码：
<StackPanel Background="#CDFCAE" Orientation="Horizontal">
<Border CornerRadius="10" Width="100" Height="40" Margin="50 10 0 0">
<TextBlock Text="结果显示：" FontSize="20" Foreground="Red"></TextBlock>
</Border>
<Border CornerRadius="10" Background="Green" Width="300" Height="40">
<TextBlock x:Name="result" FontSize="20" Foreground="White"
Margin="20 5 0 0"></TextBlock>
</Border>
</StackPanel>
后台代码：
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
Loaded+=new RoutedEventHandler(MainPage_Loaded);
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
//示例1:调用当前类中的某个方法
// HtmlPage.RegisterScriptableObject("Calculator", this);
//示例2:调用silverLight中其它类的某个方法
HtmlPage.RegisterCreateableType("calculator", typeof(Calculator));
}
//供示例1调用
//[ScriptableMember]
//public void Add(int x, int y)
//{
// int z = x + y;
// this.result.Text = String.Format("{0} + {1} = {2}", x, y, z);
//}
}
//供示例2调用
[ScriptableType]
public class Calculator
{
[ScriptableMember]
public int Add(int x, int y)
{
return x + y;
}
}
2.2. 调用
在head中添加js脚本
<script type="text/javascript">
//供示例1调用
function callSilverlight1() {
var slPlugin = document.getElementById('Xaml1');
slPlugin.content.Calculator.Add(document.getElementById('txt1').value, document.getElementById('txt2').value);
}
</script>
<script type="text/javascript">
//供示例2调用
function callSilverlight2() {
var slPlugin = document.getElementById('Xaml1');
var cal = slPlugin.content.services.createObject("calculator");
alert(cal.Add(document.getElementById('txt1').value, document.getElementById('txt2').value));
}
</script>
在Form中添加代码:
<div class="main">
<input id="txt1" type="text" />
<input id="txt2" type="text" />
<input id="Button1" type="button" value="调用(方法2)" onclick="callSilverlight2()" />
</div>