SilverLigth如何和Javascript交互:下面是例子,参看孟子的例子,源地址:
http://blog.csdn.net/net_lover/archive/2008/04/10/2272115.aspx
添加新SilverLight页面:Page.xaml,添加
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<Canvas Canvas.Top="20">
<TextBlock Canvas.Top="10" Canvas.Left="20">请输入您的姓名:</TextBlock>
<TextBox x:Name="UserInput" Width="200" Height="30" Canvas.Top="40" Canvas.Left="20"></TextBox>
<TextBlock x:Name="Msg" Canvas.Top="90" Canvas.Left="20" Foreground="Navy" FontSize="36"></TextBlock>
<Button Click="Button_Click" Content="单击我" FontSize="24" Width="160" Height="60" x:Name="BtnTest" Canvas.Top="160" Canvas.Left="20"></Button>
</Canvas
在page.xaml.cs里面添加事件,以及使用
ScriptableTypeAttribute 同时标记所有成员。在您使用
RegisterScriptableObject 方法时,无需使用
ScriptableMemberAttribute 将单独的方法标记为可脚本化,并注册脚本,以便在客户端Javascript调用。
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
public Page()
{
InitializeComponent();
//此处注册
HtmlPage.RegisterScriptableObject("aa", this);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
string UserInputContent = this.UserInput.Text;
if (UserInputContent.Equals(String.Empty))
{
UserInputContent = "Hello Silverlight World!";
}
else
{
UserInputContent = "你好," + UserInputContent;
}
HtmlWindow win = HtmlPage.Window;
this.Msg.Text = UserInputContent;
win.Alert("Silverlight 里面弹出的对话框。 " + UserInputContent);
//执行页面中的js函数:
win.Eval("getArrayTest()");
Object[] args = { "将此参数传递给 js 函数" };
win.Invoke("getArrayTest", args);
//如果页面中的值
HtmlDocument doc = HtmlPage.Document;
doc.GetElementById("UserName").SetAttribute("value", this.UserInput.Text);
}
[ScriptableMember()]
public string InterInvole()
{
string username = HtmlPage.Document.GetElementById("UserName").GetAttribute("value");
this.UserInput.Text = username;
this.Msg.Text = "您输入了:" + username;
return "你从js脚本中调用了 Silverlight 里面的方法。";
在SiverlightTest.aspx中添加代码:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/javascript">
//定义全局函数:
function getArrayTest() {
if (arguments.length > 0) {
alert("js 对话框:您传递了参数。" + arguments[0]);
return arguments[0];
}
else {
alert("js 对话框:无参数调用。");
return "js 函数返回值";
}
}
function SetUserName() {
if(SilverlightPlugin ==null)
{
alert("null");
}
else
//如果使用ajax等控件,调用应该改为:
document.getElementByID("db").get_element().Content.aa.InterInvole();
document.getElementById("db").Content.aa.InterInvole();
}
</script>
//在HTML中插入下面代码
<div id="silverlightControlHost">
<div style="border: 2px solid #EEE; margin: 20px;padding:20px">
请输入你的名字:<input id="UserName" type="text" value="" />
<input type="button" onclick="SetUserName()" value="将名字传递到 Silverlight" />
</div>
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" name="db">
<param name="source" value="ClientBin/Silverlight.xap"/>
<param name="onload" value="onLoad" />
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="获取 Microsoft Silverlight" style="border-style: none"/>
</a>
</object><iframe id="_sl_historyFrame" style='visibility:hidden;height:0;width:0;border:0px'></iframe></div
此时,点击SilverLight里面的Button,可以将值传递到SiverlightTest.aspx页面的Input里面,而点击SiverlightTest.aspx里面的button,会将Input里面的值传递到Sliverlight里面,实现两者交互。
举一反三,要实现其他复杂的功能,也变得不难了