引语
ActiveX控件已经被广泛的应用在安全输入方面,通过ActiveX控件,开发者可以轻易的通过加密算法取得加密后的字符串,以保证数据传输过程的安全。但是ActiveX控件的拘束性也显而易见 —— 仅IE浏览器提供支持。有一些开发者为了适配更多的浏览器和平台,不得不为每个平台开发相应的程序,极大的增加成本。Silverlight给开发者们提供了一个简单、高效并且几乎通用的途径来实现安全输入功能。通过Silverlight API和JS API,开发者可以轻易的在Silverlight应用和网页间实现交互操作(从有这个想法到实现示例程序花了不到20分钟);Silverlight作为微软亲儿子,用户只需要安装Silverlight环境,无需额外安装控件;Silverlight对Windows系统和Mac系统提供了相应的Silverlight运行环境,几乎涵盖了绝大部分用户,但Linux平台并未得到支持,曾经有一个Moonlight项目致力于让Silverlight运行在Linux上,后来,他们去研究让C#运行在Android上了。
======================================================================================================
实现示例
设计Silverlight程序
首先,新建一个Silverlight程序,我这里将他命名为SilverX。
然后,新建一个自定义控件用于承载输入框,我这里将它命名为 SXPasswordBox
接下来,打开 SXPasswordBox.xaml,并将代码修改为以下代码。
<UserControl x:Class="SilverX.SXPasswordBox"
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="50" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<PasswordBox x:Name="_Value"/>
</Grid>
</UserControl>
[ScriptableMemberAttribute]//对脚本公开成员
public String GetValue()
{
//在这里可以添加相应的加密代码,此处直接返回输入框的值。
return this._Value.Password;
}
打开Mainpage.xaml将刚刚写的控件拖进来
<UserControl
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"
xmlns:local="clr-namespace:SilverX" x:Class="SilverX.MainPage"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<local:SXPasswordBox x:Name="pwdbox"/>
</Grid>
</UserControl>
打开Mainpage.cs ,注册刚刚拖进来的控件。
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
this.Loaded += (obj, e) =>
{
HtmlPage.RegisterScriptableObject("pwdbox", this.pwdbox);
};
}
}
在页面中调用
首先,我们在Silverlight承载网站中打开承载此Silverlight应用的页面(SilverXTestPage.html),并且加入以下脚本<script type="text/javascript">
var control = null;
function plugInLoaded(sender, args) {
control = sender.getHost();//获取宿主
}
function getValue() {
try {
this.Text1.value= control.Content.pwdbox.GetValue();
}
catch (e)
{ alert(e); }
}
</script>
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="400" height="27">
<param name="source" value="ClientBin/SilverX.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="5.0.61118.0" />
<param name="autoUpgrade" value="true" />
<param name="onLoad" value="plugInLoaded"/> <!--这一行是新加的-->
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
设计页面,加入一个输入框和一个按钮
<input id="Text1" type="text" />
<input id="Button1" type="button" value="Get" οnclick="getValue();"/><!--点击按钮调用JS函数-->