前几天发表了 IEBrowser 访问页面中变量或者 JSON 数据的文章, 现在想说明一下在 WebBrowser 中, js 脚本如何访问 .NET 类.
你可以通过 IEBrowser 的 Scripting 属性或者 WebBrowser 的 ObjectForScripting 属性来设置可以被 js 脚本访问的对象. 而在 js 脚本中可以通过 window.external 来调用对象的方法.
为了给大家演示, 在此之前我已经建好了一个本地数据库和对应的数据集, 并添加了一个 InsertStudent 方法在数据适配器中, 这些代码不方便在此展示, 需要看完成演示的朋友, 可以参考文章末尾的演示链接, 下面我们看 School 类的代码:
[ComVisible(true)]
public class School
{
public string Register ( string email, string realName, int age )
{
if ( string.IsNullOrEmpty ( email ) )
return "EMail 不能为空";
if ( string.IsNullOrEmpty ( realName ) )
return "姓名不能为空";
if ( age <= 6 || age > 100 )
return "年龄应该在 7 到 100 之间";
try
{
SchoolDSTableAdapters.StudentTableAdapter adapter = new SchoolDSTableAdapters.StudentTableAdapter ( );
adapter.InsertStudent ( email, realName, age );
return "注册成功";
}
catch
{ return "注册失败"; }
}
}
School 类是需要使用 ComVisible 属性来修饰的, ComVisible 设置为 true, School 才能被 js 访问.
可以看到 School 只有一个简单的 Register 注册方法, 在方法当中, 我们检查了邮箱, 姓名, 年龄等参数的合法性, 然后通过之前建好的数据适配器向数据库中添加一条学生信息, 而 Register 最终返回一个字符串, js 脚本在调用 Register 方法后, 可以将此字符串显示给操作者.
下面的代码是页面 school.htm, 而这个页面也就是操作者和程序交互的界面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
function register() {
alert(window.external.Register(
document.getElementById('email').value,
document.getElementById('realName').value,
new Number(document.getElementById('age').value)
));
}
</script>
</head>
<body>
EMail: <input type="text" id="email" /><br />
姓名: <input type="text" id="realName" /><br />
年龄: <input type="text" id="age" /><br />
<input type="button" value="注册" onclick="register();" />
</body>
</html>
在页面中, 我们分别定义了三个文本框, 用于输入邮箱, 姓名和年龄, 以及一个注册用的按钮, 在按钮的点击事件中, 我们调用了页面中的 js 函数 register.
而在 js 函数 register 中, 我们通过 window.external 访问了 School 类的 Register 方法, 传递了邮箱, 姓名和年龄作为参数, 并弹出了返回的字符串.
其实, 写到这里 window.external 还并不代表 School 类, 需要我们做最后一步的操作.
最后, 我们在窗口 FormManaged 窗口中, 编写如下的代码, 窗口上包含一个名称为 webBrowser 的 WebBrowser 控件:
public partial class FormManaged : Form
{
private readonly IEBrowser ie;
public FormManaged ( )
{
InitializeComponent ( );
this.ie = new IEBrowser ( this.webBrowser );
}
private void FormManaged_Load ( object sender, EventArgs e )
{
this.ie.Navigate ( Path.Combine ( AppDomain.CurrentDomain.BaseDirectory, "school.htm" ) );
this.ie.IEFlow.Wait ( new UrlCondition("w", "school.htm", StringCompareMode.Contain) );
this.ie.Scripting = new School ( );
}
}
在窗口中, 我们定义了 IEBrowser 对象 ie 作为窗口类的只读字段.
当窗口载入时, 我们首先使用 Navigate 将 WebBrowser 导航到我们编写的 school.htm 页面, 此页面在生成时需要调正为输出到目录, 之后我们使用 Wait 方法等待 school.htm 页面载入完成, 最后通过 Scripting 属性设置 js 脚本可以访问 School 类.
Scripting 属性被设置为一个新的 School 实例时, 也就意味着之前 js 中的 window.external 将表示 School.
好的, 最后的实际运行结果就不向大家说明了, 如果想看的话, 可以参照下面的演示.
IEBrowser 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
对于 IEBrowser 如果大家有好的想法和建议, 可以留言, 因为好的想法才能更好的进步.