Silverlight与JavaScript的互相调用
1.在Silverlight中调用JavaScript
在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)
{
ScriptObject hello = HtmlPage.Window.GetProperty("Hello") as ScriptObject;
hello.InvokeSelf(this.input.Text);
}
private void submit2_Click(object sender,RoutedEventArgs e)
{
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)
{
// HtmlPage.RegisterScriptableObject("Calculator",this);
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>
<div class="main">
<input id="txt1" type="text" />
<input id="txt2" type="text" />
<input id="Button1" type="button" value="调用(方法2)" onclick="callSilverlight2()" />
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。