Silverlight与JavaScript的交互操作
Silverlight和JavaScript交互介绍以及简单Demo演示，主要包括JavaScript操作Silverlight数据、Silverlight操作JavaScript数据以及数据模版绑定数据。
1.Silverlight和JavaScript概念
可能有的朋友对于这两技术都很熟悉，有的可能不是很熟悉，为了下面好理解简单介绍一下。
(1).JavaScript
JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。它是一种动态、弱类型、基于原型的语言，内置支持类，做Web开发应该是常用的技术。
(2).Silverlight
Silverlight是一个跨浏览器的、跨平台的插件，是基于NET FrameWork的媒体体验和丰富的交互式应用程序。Silverlight提供灵活的编程模型，并可以很方便地集成到现有的网络应用程序中。Silverlight可以对运行在Mac或Windows上的主流浏览器提供高质量视频信息的快速、低成本的传递，一种富客户端技术。
2.简单理解SL与JS交互
Silverlight与JavaScript交互操作可分为两种：JavaScript操作Silverlight和Silverlight操作JavaScript，可能理解不是很到位，欢迎补充。
(1).对于JavaScript操作Silverlight的理解
使用浏览器桥对象可以分两步来处理：
A.在服务端页面加载完毕将Silverlight注册成宿主HTML页可进行脚本调用对象。
(需指定调用Silverlight插件的ScriptKey以及指定服务端公开接口，供JavaScript对象调用)
B.在客户端找到调用的Silverlight对象，调用服务端相关对象和接口操作数据。
(还是Silverght机制编写逻辑，只是开放服务端接口，供JavaScript调用执行不同数据操作)
(2).对于Silverlight操作JavaScript的理解
A.在客户端定义JavaScript的相关JS函数方法操作。
B.在服务端通过Silverlight封装的对象获取客户端的JS函数，执行不同的脚本操作。
(使用 HtmlPage.Window.GetProperty获取客户端的JS函数，执行InvokeSelf传递参数操作JS函数)
3.示例Demo演示
这里不介绍如何创建一个Silverlight程序，感兴趣的话可以查查相关资料，使用VS2010新建项目选择Silverlight应用程序就可以。
(1).Demo效果图展示
简单介绍一下这个Demo，Demo效果图如下： 
这里的使用Div布局将页面切成2大块，左边的数据操作，右边的BingMap的展示(是用来展示SL操作JS的实现动态切换)。
左侧是Silverlight效果,整体使用Grid分配布局，使用三个Border布局进行不同的数据展示，数据采用数据模版绑定，左侧下面是一个按钮操作Div(是用来展示JS操作SL的数据实现动态加载)
(2).Demo代码
1).Silverlihgt项目Web项目中宿主ASPX页面HTML代码：(也可放在宿主HTML页面中)
<%@ Page Language="C#" AutoEventWireup="true" %> <!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 runat="server">
<title>SilverlightDOM</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 90%;
text-align:center;
}
</style>
<script type="text/javascript" src="Silverlight.js"></script>
<!--中文支持http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=zh-cn-->
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" ></script>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
} var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode; if (errorType == "ImageError" || errorType == "MediaError") {
return;
} var errMsg = "Silverlight 应用程序中未处理的错误 " + appSource + "\n" ; errMsg += "代码: "+ iErrorCode + " \n";
errMsg += "类别: " + errorType + " \n";
errMsg += "消息: " + args.ErrorMessage + " \n"; if (errorType == "ParserError") {
errMsg += "文件: " + args.xamlFile + " \n";
errMsg += "行: " + args.lineNumber + " \n";
errMsg += "位置: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "行: " + args.lineNumber + " \n";
errMsg += "位置: " + args.charPosition + " \n";
}
errMsg += "方法名称: " + args.methodName + " \n";
} 引发新错误(errMsg);
}
</script>
<script type="text/javascript" language="javascript">
//其实这里浏览器桥(JS操作SL数据),涉及两部分:
//1.服务端注册Silverlight对象的Name和开放的脚本接口
//2.客户端Silverlight对象指定的服务端桥接对象调用服务端开放脚本接口
//其根本对Silverlight数据操作仍是Silverlight的操作,只是提供了接口操作者转接到HTML中
function sliverlightServerData(country) {
//获取页面的Silverlight对象
var slPlugin = document.getElementById("sliverlightObject");
//使用Silverlight对象指定的服务端Name,通过Name调用开放的接口
slPlugin.Content.SilverlightName.GetCitiesByCountry(country);
}
</script>
<script type="text/javascript" language="javascript">
//Silverlight操作JavaScript数据
//JS获取Bing Maps API
var map = null; //获取BingMap地图
function getBingMap() {
map = new VEMap('divMap');
map.LoadMap();
} //移动地图
//传入地区名称,定位地图位置
function moveMap(where) {
try {
map.Find(null, where);
}
catch (e) {
alert(e.Message);
}
}
</script>
</head>
<body onload="getBingMap()">
<form id="form1" runat="server">
<div style=" height:400px; margin:10px 5px 0px 10px">
<!--左侧Div-->
<div id="silverlightControlHost" style="float:left; height:92%; width:25%; border:1px solid purple">
<object id="sliverlightObject" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/SilverlightDOM.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.60310.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.60310.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
<!--按钮触发操作JavaScript操作Silverlight数据-->
<div style="width:100%;height:8%;background-color:Orange; border:1px solid blue; text-align:left; vertical-align:middle">
<input type="button" value="英国" onclick="sliverlightServerData(this.value)" />
<input type="button" value="德国" onclick="sliverlightServerData(this.value)" />
<input type="button" value="法国" onclick="sliverlightServerData(this.value)" />
<input type="button" value="中国" onclick="sliverlightServerData(this.value)" />
</div>
</div>
<!--右侧Bing Maps展示,注意上面Bing Maps地址脚本的引入-->
<div id="divMap" style=" float:left; position:relative; width:74%; height:100%; margin:0px auto 0px auto; z-index:2; border:1px solid purple" ></div>
</div>
</form>
</body>
</html>
2).Silverlight项目MainPage.xaml页面代码：
<UserControl x:Class="SilverlightDOM.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="500" Loaded="UserControl_Loaded"> <!--定义样式-->
<UserControl.Resources>
<Style x:Name="borderStyle" TargetType="Border">
<Setter Property="BorderBrush" Value="Green"/>
<Setter Property="BorderThickness" Value="2"/>
</Style>
</UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
<!--Grid行定义-->
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize="15" Foreground="Purple">点击选择按钮定位地图位置：</TextBlock>
<Border Grid.Row="1" Grid.RowSpan="2" Style="{StaticResource borderStyle}">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="15" Foreground="Purple">UserControlLoad加载数据：</TextBlock>
<!--ItemsControl数据源绑定显示-->
<ItemsControl x:Name="itemCities">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!--绑定数据-->
<StackPanel Orientation="Horizontal" Height="25">
<CheckBox Checked="CheckBox_Checked" Content="{Binding CityName}"></CheckBox>
<TextBlock><Run>（</Run><Run>纬度：</Run></TextBlock>
<TextBlock Foreground="Purple" Text="{Binding CityLatitude}"/>
<TextBlock>）</TextBlock>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Border>
<Border Grid.Row="3" Grid.RowSpan="2" Style="{StaticResource borderStyle}" BorderThickness="2,0,2,2">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="15" Foreground="Purple">浏览器桥开放JavaScript接口数据:</TextBlock>
<!--ItemsControl数据源绑定显示-->
<ItemsControl x:Name="itemHtmlOper">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="25" >
<RadioButton GroupName="GroupCities" Checked="RadioButton_Checked" Content="{Binding CityName}"/>
<TextBlock>（纬度：</TextBlock>
<TextBlock Text="{Binding CityLatitude}" />
<TextBlock>）</TextBlock>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Border>
<Border Grid.Row="5" Style="{StaticResource borderStyle}" BorderThickness="2,0,2,2">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="15" Foreground="Purple">ListBox数据绑定测试:</TextBlock>
<!--ListBox数据源绑定显示-->
<ListBox Name="listCities" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<CheckBox IsChecked="True" Content="{Binding CityName}">
<CheckBox.RenderTransform><!--CheckBox缩放居中-->
<ScaleTransform ScaleX="1.2" ScaleY="1.2" CenterX="1" CenterY="1"/>
</CheckBox.RenderTransform>
</CheckBox>
<TextBlock FontSize="13" Text=" 旅游景点:"/>
<ComboBox Width="100" ItemsSource="{Binding CityAttractions}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>
</Grid>
</UserControl>
3).Silverlight项目MainPage.xaml.cs代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
using System.Windows.Media.Imaging; namespace SilverlightDOM
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
} private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
//ThreadTest();//线程分配测试 string strCountry = "中国";
this.itemCities.ItemsSource = GetQueryData(strCountry);//绑定数据
this.listCities.ItemsSource = GetQueryData(strCountry);//绑定数据
}
/// <summary>
/// 注册Silvelight为脚本调用对象
/// JavaScript调用Silverlight对象
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
//HtmlDomOper();//HTML DOM操作 //浏览器桥,进行HTML与Silverlight交互,以及浏览器端开放的接口GetCitiesByCountry
//页面加载完成,将Silverlight注册成宿主HTML页上可进行脚本处理对象
//使用下面的方式注册脚本对象,第一个参数指定名称
HtmlPage.RegisterScriptableObject("SilverlightName", this);
} /// <summary>
/// 初始化数据
/// </summary>
/// <returns></returns>
private List<CityData> InitData()
{
List<CityData> listCityData = new List<CityData>() {
new CityData(){CityName="北京",CityLatitude=, CityAttractions=new List<string>(){"故宫","鸟巢","天安门"}},
new CityData(){CityName="济南",CityLatitude=, CityAttractions=new List<string>(){"趵突泉","大明湖","千佛山"}},
new CityData(){CityName="深圳",CityLatitude=,CityAttractions=new List<string>(){"欢乐谷","世界之窗","海上田园"}}
}; return listCityData;
} /// <summary>
/// 查询城市信息
/// </summary>
/// <param name="queryCondition">所在国家</param>
/// <returns>该国家城市信息集合</returns>
private List<CityData> GetQueryData(string queryCondition)
{
List<CityData> queryList = new List<CityData>();
switch (queryCondition)
{
case "中国": queryList = InitData(); break;
case "法国":
queryList.Add(new CityData("巴黎", 12.6, ));//巴黎 Paris
queryList.Add(new CityData("卢尔德", 35.5, 66.6));//卢尔德 lourdes
queryList.Add(new CityData("图卢兹", 55.3, 66.5));//图卢兹 Toulouse
break;
case "英国":
queryList.Add(new CityData("伦敦",33.3,45.5));
queryList.Add(new CityData("爱丁堡",77.8,88.9));
break;
case "德国":
CityData[] cityArray = new CityData[] {
new CityData("柏林",33.3,66.6),
new CityData("汉堡",99.8,88.9),
new CityData("慕尼黑",56.6,67.8)
};
queryList = cityArray.ToList();
break;
default: queryList = null; break;
} return queryList;
} /// <summary>
/// 对于HTML与Silverlight进行交互
/// 使用ScriptableMember表示对外部调用者公开的方法
/// </summary>
/// <param name="country"></param>
[ScriptableMember]
public void GetCitiesByCountry(string country)
{
List<CityData> listCities = GetQueryData(country);
itemHtmlOper.ItemsSource = listCities;
} /// <summary>
/// 模版数据绑定,CheckBox按钮选中事件
/// Silverlight操作JavaScript数据
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void CheckBox_Checked(object sender, RoutedEventArgs e)
{
string strCityName = string.Empty;
CheckBox chkBox = sender as CheckBox;
if (chkBox.IsChecked == true)
{
strCityName = chkBox.Content.ToString(); //Silverlight获取JS函数,使用HtmlPage.Window.GetProperty("函数名"),转化为ScriptObject对象
//使用转化的ScriptObjcet对象的InvokeSelf(线程处理),调用自己脚本函数传递参数(可选)
ScriptObject scriptObject = HtmlPage.Window.GetProperty("moveMap") as ScriptObject;
scriptObject.InvokeSelf(strCityName);
}
} /// <summary>
/// 模版数据绑定,RadioButton按钮选中事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void RadioButton_Checked(object sender, RoutedEventArgs e)
{
string strCityName = string.Empty;
RadioButton rbButton = sender as RadioButton;
strCityName = rbButton.Content.ToString(); ScriptObject scriptObject = HtmlPage.Window.GetProperty("moveMap") as ScriptObject;
scriptObject.InvokeSelf(strCityName);
} /// <summary>
/// 对HTML DOM操作支持
/// </summary>
private void HtmlDomOper()
{
//System.Windows.Browser.HtmlPage.Window;
//System.Windows.Browser.HtmlPage.Document;
//System.Windows.Browser.HtmlPage.Plugin;
//System.Windows.Browser.BrowserInformation;
//System.Windows.Browser.HtmlDocument;
//System.Windows.Browser.HtmlElement;
//System.Windows.Browser.HtmlEventArgs; System.Windows.Browser.HtmlPage.Window.Alert("Web Alert 信息提示！");
System.Windows.Browser.HtmlPage.Window.Eval("alert('Web Eval JS脚本信息提示！');");//Eval接受脚本函数语法
bool confirm = HtmlPage.Window.Confirm("Web Confirm 确认删除吗？");
if (confirm) { HtmlPage.Window.Alert("你点击了确认！"); } else { HtmlPage.Window.Eval("alert('你点击了取消！');"); }
string promptInfo = HtmlPage.Window.Prompt("Web Prompt信息提示填入!"); string parentID = HtmlPage.Plugin.Parent.Id;
HtmlElement htmlElement = HtmlPage.Document.GetElementById(parentID);//button1
string style = htmlElement.GetAttribute("style");
HtmlPage.Window.Alert(parentID + "|" + style);
} /// <summary>
/// 线程分配测试
/// </summary>
private void ThreadTest()
{
MessageBox.Show("主线程1！");
Deployment.Current.Dispatcher.BeginInvoke(delegate
{
MessageBox.Show("开辟线程1,线程Sleep 500！"); System.Threading.Thread.Sleep();
Deployment.Current.Dispatcher.BeginInvoke(delegate { MessageBox.Show("线程嵌套1！"); });
Deployment.Current.Dispatcher.BeginInvoke(delegate { MessageBox.Show("线程嵌套2！"); });
});
MessageBox.Show("主线程2！");
Deployment.Current.Dispatcher.BeginInvoke(delegate { MessageBox.Show("开辟线程2,线程Sleep 1000！"); System.Threading.Thread.Sleep(); });
MessageBox.Show("主线程3！");
Deployment.Current.Dispatcher.BeginInvoke(delegate { MessageBox.Show("开辟线程3！"); });
}
} /// <summary>
/// 数据结构
/// </summary>
public class CityData
{
public CityData() { } public CityData(string cityName,double cityLatitude,double cityLongitude)
{
CityName = cityName;
CityLatitude = cityLatitude;
CityLongitude = cityLongitude;
} public string CityName { get; set; }
public double CityLatitude { get; set; }
public double CityLongitude { get; set; }
public List<string> CityAttractions { get; set; }
}
}
(3).Demo代码简说
1).对于宿主页面注意：BingMaps脚本地址引入及其布局调整
2).对于MainPage.XAML页面布局
3).对于MainPage.xaml.cs
比较简单容易理解，对于Silverlight和JavaScript交互有更好理解的欢迎交流。
Silverlight与JavaScript的交互操作的更多相关文章
- Javascript的io操作
一.功能实现核心:FileSystemObject 对象 要在javascript中实现文件操作功能,主要就是依靠FileSystemobject对象. 二.FileSystemObject编程 使用 ...
- JS读取文件,Javascript之文件操作 (IE)
一.功能实现核心:FileSystemObject 对象 要在javascript中实现文件操作功能,主要就是依靠FileSystemobject对象. 二.FileSystemObject ...
- JavaScript中ActiveXObject操作本地文件夹
在Windows平台上, js可以调用很多Windows提供的ActivexObject,本文就使用js来实现文档处理, 和使用js编写ActiveX做一个简单介绍. <!DOCTYPE HTM ...
- 第一百一十六节，JavaScript，DOM操作样式
JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- silverlight 中javascript 代码与托管代码的互调用 以及一些思考
silverlight 客户端javascript 代码与托管代码的互调用时比较用意义的同时,因为silverlight本身就是一个插件,如果两者之间不能进行相互的调用,对于web 上的一些特殊的功能 ...
- 全面兼容的Iframe 与父页面交互操作
父页面 Father.htm 源码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- JavaScript获取和操作html的元素
#转载请留言联系 1.获取元素 JavaScript的用途就是为了实现用户交互和网页的大部分动画.所以JavaScript常常需要操作html中的元素.要先操作就要先获取过来.JS有几种途径获取元素, ...
- JavaScript中数组操作常用方法
JavaScript中数组操作常用方法 1.检测数组 1)检测对象是否为数组,使用instanceof 操作符 if(value instanceof Array) { //对数组执行某些操作 } 2 ...
- C# winForm启动最小化到任务栏右侧通知栏并交互操作
原文链接:http://blog.sina.com.cn/s/blog_45eaa01a01013u36.html C# winForm启动最小化到任务栏右侧通知栏并交互操作 一.主要功能:(1).程 ...
随机推荐
- 《Linux内核精髓：精通Linux内核必会的75个绝技》一HACK #14 虚拟存储子系统的调整
HACK #14 虚拟存储子系统的调整 本节介绍如何使用/proc进行虚拟存储子系统的调整.虚拟空间存储方式在Linux上向应用程序分配内存时,是通过以页面为单位的虚拟存储方式进行的.采用虚拟存储方式 ...
- multipart/form-data boundary 说明
含义 ENCTYPE="multipart/form-data" 说明: 通过 http 协议上传文件 rfc1867协议概述,jsp 应用举例,客户端发送内容构造 1.概述在最初 ...
- springcloud(六) Hystrix 熔断，限流
Hystrix 熔断: 首先仍然启动Eureka,这里就不说了. OrderController.java: package com.tuling.cloud.study.user.controlle ...
- logger 的使用一 小结
方式一 依赖: <!-- log start --> <dependency> <groupId>log4j</groupId> <artifac ...
- Overcoming Life's Obstacles - ASC 2017 March 03
Overcoming Life's Obstacles - How a top oboist overcame a neurological disorder to play again ©Advan ...
- Eclipse开启或取消快速导航栏（toggle breadcrumb）
在Eclipse中快速调出导航栏 关闭导航栏: 在视图的设置中,去掉breadcrum的勾选状态
- cookie的长度和限制数量
一.浏览器允许每个域名所包含的 cookie 数 Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个,但 IE7 似乎也允许每个域名 50 ...
- 用c++实现获取程序运行的时间
看代码: #include<iostream> #include<ctime> using namespace std; int main() { int i; time_t ...
- （基于Java）算法之动态规划——矩阵连乘问题
动态规划(Dynamic Programming):与分治法类似,其基本思想也是将待求解问题分解成若干个子问题,先求解子问题,然后从这些子问题的解得到原问题的解.与分治法不同的是,适用于动态规划法求解 ...
- redis的订阅和发布
#订阅和发布有什么用呢?# 特点# 1.实现一个一对多的效果,只有一个发布者,多个订阅者# 2.实时的发布消息,广播方发布消息,所有的订阅者都会受到消息,一个人同时只能接受#一个频道 1.先写一个公共 ...